[FEATURE] Request: Allow varying widths in pie/doughnut chart of multiple datasets

[ea-ncu]

Expected Behavior

Allow us to change the width of one of the datasets in a pie/doughnut chart. It would be handy to be able to set your own values or allow the graph to use the data to create a "weight" attribute (dataset 1 has points 5,4,3 while dataset 2 has points 50,40,30, so dataset 2 could be thicker).

Current Behavior

Currently it is split evenly between the amount of datasets and will all be equal width.

Possible Solution

A simple weight attribute in a dataset could work. Say, a weight of 1 will retain the original size. A dataset of weight 0.5 will have half as much weight as a dataset of 1, so it will be half as thick.

Context

I am trying to add a ring around my pie chart that indicates if a percentage has been reached. It is meant to show (in my example work) how many customers it took to reach 80% of the total sales. I am currently doing this with a second dataset consisting of data 80,20. However, I want to reduce the size of the ring as it is not the relevant information to be displayed, and make it so that it is simply a "border" or "outline" to the actual data. I am also interested if there is a marker option in chart.js that accomplishes this, similar to drawing a line y = 5 on a line graph to compare your actual line graph to.

[GammaGames]

I want to use this idea to show sub-sets of data. If you have 3 large categories (Say, brands of graphics card) they would be represented with a doughnut chart that shows relative sales. The interior pie chart (a doughnut with cutoutPercentage: 0) would be sliced up for each company to show relative ownership of each card.

Here's a beautiful mockup:

I would specifically like to be able to set the cutoutPercentage option for multiple datasets on the doughnut type chart

[sheixt]

+1 on this. I've faked it by duplicating the datasets to make some "thicker" than other... Far from ideal but it creates the desired outcome

[damianobarbati]

+1! Any way to achieve this?

@sheixt I didn't quite get it: how did you manage to work this around?

[GammaGames]

If you have multiple datasets currently they still stack.

You might have to create a custom callback for the tooltips since they don't work correctly. This is what I used:

tooltips: {
    callbacks: {
        label: function(tooltipItem, data) {
            var label = data.datasets[tooltipItem.datasetIndex].labels[tooltipItem.index];
            var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
            return label + ': ' + numeral(value).format("$0,0.00");
    }
}

[damianobarbati]

Thanks @GammaGames but I need to make the inner pie (most significant) wider then the external (less significant). I'm OK with the tooltips :)

[GammaGames]

I was editing my comment as you replied! My guess as to what they mean by duplicating datasets, is including one dataset multiple times to make it thicker than the rest. Like so:

You can also make the border width 0 for the inner datasets and it'll look like this:

I'm not sure if there's a way to only change the borders only for the left/right and top/bottom

[damianobarbati]

Smart one xD Thanks @GammaGames for the explanation. I'd rather keep it like this than hacking, let's wait for a proper way to customise it :)

[GammaGames]

Exactly my thoughts, though I did like @sheixt's creative workaround

[SteveEdson]

Also needing this, @sheixt's workaround gets us where we need to be, but we have the canvas artifacts inbetween each dataset, as shown in @GammaGames' screenshot, so not perfect unfortunately.

Please could this be reviewed?

Thanks!

[sheixt]

Exactly my thoughts, though I did like @sheixt's creative workaround

"Creative" is one way of looking at it... I felt it was a bit of a hack. On larger scale data processing, I'd imagine this may begin to be a performance hit as you are forcing the processing of multiple datasets where it shouldn't be necessary.

I actually ended up hacking a display for a speed-o-meter with an additional dataset and using the datalabels plugin. This shows the flexibility possible when you think outside of the box. But I think there is scope to extend the default functionality to allow for additional options such as the widths (as discussed here) and other chart type (e.g. a gauge).

[sheixt]

This is an example of what I was able to achieve with utilising multiple datasets. I think in total the main bar in the gauge actually uses 3 of the same dataset to make it so wide in comparison to one for the labels (so it kept that thin).

Obviously if you wanted a bigger difference in the datasets, you could end up having to duplicate many time... which is far from ideal.