search

chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
64.91k stars 11.93k forks source link

Stacked doughnut charts #11162

Open janklimo opened 1 year ago

janklimo commented 1 year ago

Feature Proposal

Looking into ways to implement the following:

Screenshot 2023-02-23 at 11 20 21

Useful when filters are applied to the original dataset. I'm unaware if this is currently possible. I'd be grateful for any pointers, possibly there is a plugin I could base this on?

Possible Implementation

I can imagine implementing this if there exists a way to render a doughnut chart with overlayed arcs. When filters are applied, the bottom layer is made slightly transparent, the top layer arc segments get specific widths to illustrate different values.

etimberg commented 1 year ago

I wonder if making a stacked polar-area chart + allowing cutouts in the polar area chart would be a more sustainable way to solve this. That'd definitely be some work though

pacastro commented 1 year ago

This is similar to the wind rose chart I was trying to achieve, allowing cutouts in polar area chart seems like a missing part if you want the tick labels to not start from the center. For this example it seems thats not the case because there are no ticks displayed.

So you can achieve this using polar-chart, manually stacking 3 datasets (or more) on top of each other and using 'order' option so the bigger dataset gets drawn first and the the white circle (constant value dataset) gets drawn last and on top of the others.

EDIT: getting the colors like that example could be problem with a polar chart though...