Chart js pie or doughnut charts 3 inside instead of 1

Question

Is it possible to have multiple charts inside each other:

Please check js fiddle for "single" and what I would like is to have that as a first one, inside second one and so on...

var data = [
 {  
   label: "title 1",
   value: 32,
   color: "#444334"
  }, {
   label: "title 2",        
   value: 51,
   color: "#f0f0f0"
  }, {
   label: "title 3",
   value: 17,
   color: "#8ba43a"
}];

Check image attached (sorry about bad graphic)

Thanks.

This is possible in highcharts: http://www.highcharts.com/demo/pie-donut. I do not know about chart.js. — wergeld, Jul 12 '16 at 17:03
As an addition to previous comments: It is really simple in Highcharts, the only think you need to set is innerSize and size of your series. Here you can find an example: http://jsfiddle.net/o690zwd0/ — Grzegorz Blachliński, Jul 13 '16 at 10:15

Rachel Gallen · Accepted Answer · 2016-07-12T18:16:33.247

1

You can do this with jqplot or chart.js

An example from jsplot:

$(document).ready(function(){
  var s1 = [['a',6], ['b',8], ['c',14], ['d',20]];
  var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]];

  var plot3 = $.jqplot('chart3', [s1, s2], {
    seriesDefaults: {
      // make this a donut chart.
      renderer:$.jqplot.DonutRenderer,
      rendererOptions:{
        // Donut's can be cut into slices like pies.
        sliceMargin: 3,
        // Pies and donuts can start at any arbitrary angle.
        startAngle: -90,
        showDataLabels: true,
        // By default, data labels show the percentage of the donut/pie.
        // You can show the data 'value' or data 'label' instead.
        dataLabels: 'value'
      }
    }
  });
});

According to the jqplot page, it requires minimum of jquery 1.9.1, along with it's main jqplot, plus jqplot pieRenderer/donutRenderer scripts and the jqplot css.

The code above will produce something like this:

You can add another series, which will create a third circle.

edited Jul 12 '16 at 18:16

answered Jul 12 '16 at 18:11

Rachel Gallen

27,943
21
72
81

How to add label for each of the charts? Everything else is good. – Morpheus Jul 13 '16 at 11:23
@Morpheus i think you can add 'legend: { show:true, location: 'e' }' and it will show a legend. For labels with arrows ou similar, je ne sais pas, sorry – Rachel Gallen Jul 13 '16 at 12:10
@Morpheus You define the legend after, like this http://stackoverflow.com/a/12136777/1675954 – Rachel Gallen Jul 13 '16 at 12:48
I know how to add labels but I wanted to have them different for each of the circles, so first circles has name Total, second will have Regeneration, third will have Stamina... so when user hovers over first one it should say Total: xy% over 3 different colors... etc... is that possible with charts js? – Morpheus Jul 14 '16 at 07:28

Chart js pie or doughnut charts 3 inside instead of 1

1 Answers1