ChartJS - Donut charts with multiple rings

Question

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

Adaurd

It seems that this is not possible. #28807308 – Elanaeland

Have you get any solution? I also need same thing – Venation

@iWatch nope. We changed to D3 chart #29301651 – Adaurd

@SoniAli Thanks for your answer...But yes it is possible to make nested doughnut with chartJS...I made it...:) – Venation

@iWatch can you please share the answer! – Adaurd

Answer 1

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
    }
};

Cognize

This is awesome!! :D – Ineslta

How to remove white stroke except in the part of separation of the inner and outer chart? – Statuesque

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! – Bosanquet

Answer 2

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.

Epifaniaepifano

The correct sample link is this: chartjs.org/samples/latest/charts/pie.html – Selfgoverned

Answer 3

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!)

Busboy

Answer 4

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/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="myChart" width="400" height="400"></canvas>

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

Endrin