chartschart.jsdonut-chart

chart issue achieving three donut under one another

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

enter image description here

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.

Solution
    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>