chart issue achieving three donut under one another

Question

Can someone help achieving a donut in this following format using chart.js?

really appreciate your help.

Thanks

var data = {
  labels: ["Segment 1", "Segment 2", "Segment 3"],
  datasets: [
    {
      data: [40, 60], // Sizes of Profit segments (40% and 60%)
      backgroundColor: ["lightgreen", "transparent"]
    },
    {
      data: [25, 75], // Sizes of Income segments (25% and 75%)
      backgroundColor: ["lightcoral", "transparent"]
    },
    {
      data: [10, 90], // Sizes of Loss segments (10% and 90%)
  backgroundColor: ["lightblue", "transparent"]
    }
  ]
};

var options = {
  cutoutPercentage: 75, // Adjust this value to control the size of the hole in the doughnut
  circumference: Math.PI, // Set to Math.PI for a semi-circle or adjust according
  rotation: -Math.PI / 2, // Start angle for the doughnut chart
  animation: { animateRotate: true, animateScale: false },
  plugins: { datalabels: { display: false } }
};

// Get the canvas element
var ctx = document.getElementById("multiDoughnutChart").getContext("2d");

// Create the doughnut chart
var myChart = new Chart(ctx, {
  type: "doughnut",
  data: data,
  options: options
});

Above is my try but not getting the result like i am looking for.

Answer 1

1. The problem with multi series doughnut charts is that you have to generate the labels yourself as described here.
2. You also need to customize the tooltips.
   • They should not appear when the mouse pointer hovers over the grey areas (see Filter Callback).
   • Add '%' to the label (see Label Callback).
   • Style the colored box that otherwise is displayed with a white border due to dataset.borderWidth (see Label Color Callback).

Please take a look at your amended and runnable code below and see how it works.

new Chart('multiDoughnutChart', {
  type: "doughnut",
  data: {
    labels: ['Profit', 'Income', 'Loss'],
    datasets: [{
        data: [40, 60],
        backgroundColor: ['lightgreen', '#EFEFEF'],
        borderWidth: 10,
        borderRadius: [10, 0]
      },
      {
        data: [25, 75],
        backgroundColor: ['lightcoral', '#EFEFEF'],
        borderWidth: 10,
        borderRadius: [10, 0]
      },
      {
        data: [10, 90],
        backgroundColor: ['lightblue', '#EFEFEF'],
        borderWidth: 10,
        borderRadius: [10, 0]
      }
    ]
  },
  options: {
    cutout: '30%',
    hover: {
      mode: null
    },
    plugins: {
      legend: {
        position: 'bottom',
        labels: {
          generateLabels: chart => chart.data.labels.map((label, i) => ({
            text: label,
            idx: i,
            fillStyle: chart.data.datasets[i].backgroundColor[0],
            strokeStyle: '#fff',
            hidden: !chart.isDatasetVisible(i)
          }))
        },
        onClick: (event, legendItem, legend) => {
          legend.chart.getDatasetMeta(legendItem.idx).hidden = legend.chart.isDatasetVisible(legendItem.idx);
          legend.chart.update();
        }
      },
      tooltip: {
        filter: tooltipItem => tooltipItem.dataIndex == 0,
        callbacks: {
          label: ctx => ctx.raw + '%',
          labelColor: ctx => ({
            backgroundColor: ['lightgreen', 'lightcoral', 'lightblue'][ctx.datasetIndex],
            borderWidth: 0,          
          })
        }
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@^4"></script>
<canvas id="multiDoughnutChart" style="max-height: 200px"></canvas>