[Chartjs]-ChartJS Doughnut Datasets with different thickness for each data value

by

1👍

Here you can find the answer of your question: https://github.com/chartjs/Chart.js/issues/6195

enter image description here

I transferred the answer of "ex47" to chart.js 3
I put the constant "data" into the html file just to have less double code, it should better be in the javascript file.

var thickness = {
  id: "thickness",
  beforeDraw: function (chart, options) {
    let thickness = chart.options.plugins.thickness.thickness;
    thickness.forEach((item, index) => {
      chart.getDatasetMeta(0).data[index].innerRadius = item[0];
      chart.getDatasetMeta(0).data[index].outerRadius = item[1];
    });
  },
};

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: "doughnut",
  plugins: [thickness],
  data: data,
  options: {
    plugins: {
      thickness: {
        thickness: [
          [100, 130],
          [80, 150],
          [70, 160],
          [100, 130],
          [100, 130],
          [100, 130],
        ],
      },
    },
  },
});
<html>
   <head>
      <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
      <script>
         const data = {
             labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
             datasets: [
                 {
                     label: "# of Votes",
                     data: [12, 19, 3, 5, 2, 3],
                     backgroundColor: [
                         "rgba(255, 99, 132, 0.2)",
                         "rgba(54, 162, 235, 0.2)",
                         "rgba(255, 206, 86, 0.2)",
                         "rgba(75, 192, 192, 0.2)",
                         "rgba(153, 102, 255, 0.2)",
                         "rgba(255, 159, 64, 0.2)"
                     ],
                     borderColor: [
                         "rgba(255, 99, 132, 1)",
                         "rgba(54, 162, 235, 1)",
                         "rgba(255, 206, 86, 1)",
                         "rgba(75, 192, 192, 1)",
                         "rgba(153, 102, 255, 1)",
                         "rgba(255, 159, 64, 1)"
                     ],
                     borderWidth: 1
                 }
             ]
         }
      </script>
      <style>
         #chartWrapper {
         width: 400px;
         height: 400px;
         }
      </style>
   </head>
   <body>
      <div id="chartWrapper">
         <canvas id="myChart" width="400" height="400"></canvas>
      </div>
   </body>
   <script src="myChart.js"></script>
</html>

"Spirit04eK"’s solution sets the thickness in descending order of the magnitude of the value.

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: "doughnut",
  plugins: [
    {
      beforeDraw: function (chart) {
        const datasetMeta = chart.getDatasetMeta(0);
        const innerRadius = datasetMeta.controller.innerRadius;
        const outerRadius = datasetMeta.controller.outerRadius;
        const heightOfItem = outerRadius - innerRadius;

        const countOfData = chart.getDatasetMeta(0).data.length;
        const additionalRadius = Math.floor(heightOfItem / countOfData);

        const weightsMap = datasetMeta.data
          .map((v) => v.circumference)
          .sort((a, b) => a - b)
          .reduce((a, c, ci) => {
            a.set(c, ci + 1);
            return a;
          }, new Map());

        datasetMeta.data.forEach((dataItem) => {
          const weight = weightsMap.get(dataItem.circumference);
          dataItem.outerRadius = innerRadius + additionalRadius * weight;
        });
      },
    },
  ],
  data: data,
  options: {
    layout: {
      padding: 10,
    },

    plugins: {
      legend: false,
      datalabels: {
        display: false,
      },
    },

    maintainAspectRatio: false,
    responsive: true,
  },
});
<html>
   <head>
      <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
      <script>
         const data = {
             labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
             datasets: [
                 {
                     label: "# of Votes",
                     data: [12, 19, 3, 5, 2, 3],
                     backgroundColor: [
                         "rgba(255, 99, 132, 0.2)",
                         "rgba(54, 162, 235, 0.2)",
                         "rgba(255, 206, 86, 0.2)",
                         "rgba(75, 192, 192, 0.2)",
                         "rgba(153, 102, 255, 0.2)",
                         "rgba(255, 159, 64, 0.2)"
                     ],
                     borderColor: [
                         "rgba(255, 99, 132, 1)",
                         "rgba(54, 162, 235, 1)",
                         "rgba(255, 206, 86, 1)",
                         "rgba(75, 192, 192, 1)",
                         "rgba(153, 102, 255, 1)",
                         "rgba(255, 159, 64, 1)"
                     ],
                     borderWidth: 1
                 }
             ]
         }
      </script>
      <style>
         #chartWrapper {
         width: 400px;
         height: 400px;
         }
      </style>
   </head>
   <body>
      <div id="chartWrapper">
         <canvas id="myChart" width="400" height="400"></canvas>
      </div>
   </body>
   <script src="myChart.js"></script>
</html>

Leave a comment