Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
ea-ncu opened this issue Sep 5, 2017 · 11 comments

Comments

@ea-ncu
Copy link

ea-ncu commented Sep 5, 2017

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
Copy link

GammaGames commented Jan 4, 2018

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:
image

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

@sheixt
Copy link

sheixt commented Feb 9, 2018

+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
Copy link

damianobarbati commented May 11, 2018

+1! Any way to achieve this?

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

@GammaGames
Copy link

GammaGames commented May 11, 2018

If you have multiple datasets currently they still stack.

image

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
Copy link

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

screen shot 2018-05-11 at 16 18 49

@GammaGames
Copy link

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:

image

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

image

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

@damianobarbati
Copy link

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
Copy link

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

@SteveEdson
Copy link

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
Copy link

sheixt commented Sep 28, 2018

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
Copy link

sheixt commented Sep 28, 2018

screen shot 2018-09-28 at 14 05 45

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants