Chart.js – making a grouped pie chart

by

0👍

✅

I think you could add 2 datasets, 1 grouped and 1 with all values.
To show the labels, you can use https://github.com/chartjs/chartjs-plugin-datalabels/.

const multiLeveData = {
  firstLevel: {
    data: [15, 10]
  },
  secondLevel: {
    data: [20, 30]
  },
};
const dataForDataset = function(grouped) {
  const result = [];
  for (const key of Object.keys(multiLeveData)) {
    if (grouped) {
      result.push(multiLeveData[key].data.reduce(function(a, b) { return a + b; }, 0));
    } else {
      multiLeveData[key].data.forEach(function(item){
        result.push(item);
      })
    }
  }
  return result;
}
const ctx = document.getElementById("myChart");
Chart.register(ChartDataLabels);
const myChart = new Chart(ctx, {
  type: "doughnut",
  data: {
    datasets: [
      {
        label: "Some metric",
        backgroundColor: [
          "#619E98",
          "#619E98",
          "#7D35CA",
          "#7D35CA"
        ],
        borderWidth: 1,
        borderRadius: 5,
        offset: [0, 0, 0, 0, 0, 0, 0],
        cutout: "50%",
        data: dataForDataset(),
      },
      {
        label: "Some metric",
        backgroundColor: "#4164BE",
        borderWidth: 1,
        borderRadius: 5,
        offset: [0, 0, 0, 0, 0, 0, 0],
        cutout: "50%",
        data: dataForDataset(true),
      },
    ],
  },
  options: {
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        display: false,
      },
      title: {
        display: true,
        text: "Tag Distrubution by Class",
        color: "black",
      },
      datalabels: {
        color: 'white',
        font: {
          size: 16
        }
      }
    },
    layout: {
      padding: 10,
    },
    maintainAspectRatio: true,
    responsive: true,
  },
});
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.1.0/dist/chartjs-plugin-datalabels.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400" tabindex="1"/>
    </div>
  </body>
</html>

Leave a comment