how to create donut chart using highcharts?

Question

I need your help , my team leader gave me this chart to draw enter image description here

but I do not know how to do that using the jQuery Highchart plugin

+1 This is easy just have a look at the link..Try customize it using Fiddle. The Chart like above might not be possible exactly. — Khushal Dave, May 22 '14 at 10:59
thanks but I am very confused about how to make its form like my one — Mo Haidar, May 22 '14 at 10:59
@Mohammad Highcharts can not be customized to this extent like adding images over sectors. It is what it is. Lets see if some one has tried it. — Khushal Dave, May 22 '14 at 11:02
have a look at this one - it comes pretty close: http://stackoverflow.com/questions/11678684/highcharts-donut-chart-without-inner-pie — Asped, May 22 '14 at 12:18

score 3 · Accepted Answer · answered May 22 '14 at 13:21

As stated in the comments you want a pie type where the innerSize is slightly less than the size. This will produce thin "wedges".

size: '60%',
innerSize: '50%',

For the labels, enable dataLabels with softConnector: false will get you closest to that look.

dataLabels: {
    enabled: true,
    softConnector: false
}

Finally for the images use Renderer.image and place the images at the dataLabels coordinates.

    function(chart){
        var middleX = chart.plotWidth / 2;
        var series = chart.series[0];
        var points = series.points;
        // image for each data label
        for (var i = 0; i < points.length; i++){
            var dataLabel = points[i].dataLabel;
            var posX = dataLabel.x > middleX ? dataLabel.x + 30 : dataLabel.x - 60; chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', posX, dataLabel.y, 50, 50)
        .add(); 
        }
        // middle image
        chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', series.center[0] - 25, series.center[1] - 25, 60, 60)
        .add();

    });

Here's a fiddle putting this all together.

Or use `dataLabels.formatter` with `useHTML: true`. Like this: http://jsfiddle.net/k7Cw7/2/ - only limitation is that exporting to image will fail (image won't be included). — Paweł Fus, May 22 '14 at 13:33

score 1 · Answer 2 · answered Apr 12 '17 at 13:59

JsFiddle

this example is very useful to you .try this

Html

  <div id="container" style="height: 400px; width: 500px"></div>

JS

  $(function() {
   var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'pie'
  },
  credits: {
            enabled: false
        },
        exporting: { 
            enabled: false
         },
  title: {
    text: 'MOBILIZATION SOURCE',
  },
  colors: ['#1b3264', '#5bc7ff', '#5b8eff', '#135af4'],
  plotOptions: {
    pie: {
      borderColor: '#000000',
      innerSize: '70%',
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
        style: {
          color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
        }
      }
    }
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  series: [{
    name: 'Source',
    data: [
      ['Pysical visit', 59],
      ['Call centre', 31],
      ['Mela', 9],
      ['Self', 2]
    ]
  }]
},
// using 

function(chart) { // on complete

  var xpos = '50%';
  var ypos = '53%';
  var circleradius = 102;

  // Render the circl
  // Render the text 
  chart.renderer.text('<span style="color: black">Total</span>', 225, 225).css({
    width: circleradius * 2,
    color: '#red',
    fontSize: '16px',
    textAlign: 'center'
  }).attr({
    // why doesn't zIndex get the text in front of the chart?
    zIndex: 999
  }).add();
});
});

how to create donut chart using highcharts?

2 Answers2