Doughnut datasets with different thickness

[milosbjelcevic]

I need help with this kind of chart.

Any ideas how to make different thickness for segments ???
I used doughnut type for this.

[sbcreates]

I'm looking to achieve something similar - did you come up with a solution?

[sbcreates]

I was able to do this in my own way (there is probably a better way!).

I am creating a doughnut chart using one dataset with only two pieces of data to render on the chart.
datasets: [{ data: [ amountRaised, amountLeftToRaise ] }]

I needed the segment for amountLeftToRaise to be thinner than the segment for amountRaised. So what I did was in my options for my doughtnut chart, I coded the cutoutPercentage in my options to be the thickness I wanted for amountRaised.

I added a part to my options under elements for customCutout that I set to true.

options: {
    elements: {
        customCutout: true
    }
    cutoutPercentage: 92
}

Using Chart.pluginService.register I created a function that manipulates the radius for the segment amountLeftToRaise:

Chart.pluginServce.register({
    // Change thickness of line for the data section of the 
    // doughnut chart that displays the amount that is left to be raised. Accessing data[1] gets us the
    // correct data section of the doughnut we want to manipulate.
    beforeDraw: function(chart) {
        if (chart.config.options.elements.customCutout !== undefined) {
            chart.getDatasetMeta(0).data[1]._view.innerRadius = 94;
            chart.getDatasetMeta(0).data[1]._view.outerRadius = 98;
            chart.update();
        }
    }
})

This is what I'm making work for me and hopefully it helps!

[ex47]

example https://codepen.io/ex47/pen/XWRbrNV

[Spirit04eK]

For version 3 with solution @ex47 + small fixes

new Chart(canvasElement, {
      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: {
        labels: labels, // change this - array of labels 
        datasets: [{
          backgroundColor: colors, // change this - array of colors
          data: data, // change this - array of value
          borderWidth: 0,
        }],
      },

      options: {
        layout: {
          padding: 10,
        },

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

        maintainAspectRatio: false,
        responsive: true,
      }
    });