ChartJS - Donut charts with multiple rings

Question

Is it possible to create a donut chart with multiple rings using ChartJS as shown below?

multi series donut chart

It seems that this is not possible. http://stackoverflow.com/questions/28806808/chartjs-nested-pie-doughnut-charts — jcuenod, Mar 27 '15 at 13:38
@iWatch nope. We changed to D3 chart http://stackoverflow.com/questions/29301151/d3-js-donut-charts-with-multiple-rings-and-animation-transition — Soni Ali, Mar 31 '15 at 10:14
@SoniAli Thanks for your answer...But yes it is possible to make nested doughnut with chartJS...I made it...:) — Apple_Magic, Apr 08 '15 at 16:50

score 19 · Answer 1 · edited May 05 '16 at 11:35

19

You can find out the solution at fiddle link

var ctx = document.getElementById("chart-area").getContext("2d");
var myDoughnut = new Chart(ctx, config);
var config = {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [
               10,20,30
                ],
                backgroundColor: [
                "#F7464A",
                "#46BFBD",
                "#FDB45C"
            ],
        }, {
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor()

            ],
                backgroundColor: [
                "#F7464A",
                "#46BFBD",
                "#FDB45C"
            ],
        }],
        labels: [
            "Red",
            "Green",
            "Yellow"
        ]
    },
    options: {
        responsive: true
    }
};

edited May 05 '16 at 11:35

Jamie Eltringham

810
3
16
25

answered Nov 17 '15 at 07:44

Varun Mittal

211
2
4

This is awesome!! :D – FranzHuber23 Apr 05 '19 at 10:11
How to remove white stroke except in the part of separation of the inner and outer chart? – Ashutosh Shrestha Dec 20 '19 at 14:55
1

is there an way we can make rings interdependent? like in outer ring i need 4 sections and all of them have 2 subsections each! – DHRUV GAJWA Feb 13 '20 at 09:51

score 4 · Answer 2 · edited Aug 10 '18 at 12:43

4

You need to add multiple datasets into chart. they will be displayed as you need. Please look into their own sample of pie chart. You can download and open it locally as example. There they have multiple datasets, that makes chart look like you need.

Hope that it helped.

edited Aug 10 '18 at 12:43

radalin

600
5
13

answered May 05 '16 at 09:40

Matvei Nazaruk

804
6
4

The correct sample link is this: http://www.chartjs.org/samples/latest/charts/pie.html – radalin Aug 10 '18 at 11:29

score 0 · Answer 3 · answered May 15 '20 at 11:45

0

I know it was old question, but have stuck yesterday into same, so far best that i have touch is Chart js and this is a plugin who does exactly that (and even more!)

answered May 15 '20 at 11:45

Gorodeckij Dimitrij

4,209
2
17
21

score 0 · Answer 4 · answered Aug 30 '23 at 10:23

In the 'data' field, we add more charts by adding elements for the 'datasets' array.

data: {
  labels: [], // Label of Legends and Slices on Doughnut Chart.
  datasets: [
    {
      data: [], // Doughnut Chart data.
      backgroundColor: [], // Color of Slices on Doughnut Chart.
      ...
    }
  ]
};

Chart.register(ChartDataLabels);

// Write Javascript code!
var ctx = document.getElementById('myChart');
var data = {
  // labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
  datasets: [
    {
      data: [20, 20, 50, 70, 80],
      backgroundColor: ['#FFC300', '#F72585', '#4CC9F0', '#5ED400', '#4D09E8'],
    },
    {
      data: [90, 30, 60, 40, 20],
      backgroundColor: ['#FFC300', '#F72585', '#4CC9F0', '#5ED400', '#4D09E8'],
    },
  ],
};

var options = {
  responsive: true,
  plugins: {
    datalabels: {
      color: 'white',
      font: {
        weight: 'bold',
      },
    },
  },
};

var myDoughnutChart = new Chart(ctx, {
  type: 'doughnut',
  data,
  options,
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<canvas id="myChart" width="400" height="400"></canvas>

An example of adding and removing rings in ChartJS with buttons.

ChartJS - Donut charts with multiple rings

4 Answers4

Linked