CODEWITHSUNDEEP
highcharts
user1234
user1234

Reputation: 3159

Add text inside a circular progress pie chart bar using HIGHCHARTS

I'm using highcharts and I want to add text inside a circular progress pie chart. here is the example I'm working on:

var gaugeOptions = {

        'chart': {
            'type': 'solidgauge'
        },

        'title': null,

        'tooltip': {
            'enabled': false
        },

        'pane': {
          'center': ['50%', '50%'],
          'size': '500px',
          'startAngle': 0,
          'endAngle': 360,
          'background': {
            'backgroundColor': '#EEE',
            'innerRadius': '90%',
            'outerRadius': '100%',
            'borderWidth': 0
          }
        },

        'yAxis': {
          'min': 0,
          'max': 100,
          'labels': {
            'enabled': false
          },

          'lineWidth': 0,
          'minorTickInterval': null,
          'tickPixelInterval': 400,
          'tickWidth': 0
        },

        'plotOptions': {
            'solidgauge': {
                'innerRadius': '90%'
            }
        },

        'series': [{
            'name': 'Speed',
            'data': [80],
            'dataLabels': {
                'enabled': false
            }
        }]
    };

http://jsfiddle.net/morqp9at/

I want to mention the percentage inside with a text: 80% of Total List How to add this text inside the circle? Thanks

Upvotes: 0

Views: 527

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

You can use the dataLabel and format feature to achieve it.

Demo: https://jsfiddle.net/BlackLabel/mokatgdf/

dataLabels: {
  borderWidth: 0,
  format: '<div style="text-align:center">' +
    '<span style="font-size:25px">{y}% of Total List</span><br/>' +
    '</div>'
},

API: https://api.highcharts.com/highcharts/plotOptions.series.dataLabels.format

Upvotes: 1

Related Questions