search

timqian / chart.xkcd

xkcd styled chart lib
https://timqian.com/chart.xkcd/
MIT License
7.6k stars 199 forks source link

Add a new StackedBar chart #54

Closed matt3play closed 4 years ago

matt3play commented 4 years ago

This change adds a separate StackedBar type of chart.

I did consider modifying the main Bar chart to just take multiple data arrays as input, but decided that it was better create a separate chart type, as it seems likely that you might want to have some sort of "side-by-side" bar chart in the future.

I also updated the example for the bar chart so that the title and axes made sense.

Screenshot before and after this change

image

timqian commented 4 years ago

@matt3play Firstly, thanks for your work!

For stacked bar chart, I am thinking, it might be better if legend and color are also added as how the pie chart behaves.

Because if no legend is provided, the stacked bar might look a little confusing before the mouse hovers on the bars

matt3play commented 4 years ago

Good point!

I've got a PR up with tooltips, but adding a legend makes sense too. Maybe as an optional add-on

On Fri, Nov 29, 2019, 12:00 AM Tim Qian notifications@github.com wrote:

@matt3play https://github.com/matt3play Firstly, thanks for your work!

For stacked bar chart, I am thinking, it might be better if legend and color are also added as how the pie chart behaves.

Because if no legend is provided, the stacked bar might look a little confusing before the mouse hovers on the bars

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/timqian/chart.xkcd/pull/54?email_source=notifications&email_token=ALZIRUWLKNMQSXZOZ3IMH2TQWCOVRA5CNFSM4JSYOYBKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFN3YFQ#issuecomment-559660054, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALZIRUTJEKDWNL4MNNYDXL3QWCOVRANCNFSM4JSYOYBA .

matt3play commented 4 years ago

Add a legend, and changed the chart to always be colored (instead of just coloring on mouseover). Now it looks like this:

image

matt3play commented 4 years ago

Also for clarity, here's a screenshot with the mouse over a bar to show that label:

image

timqian commented 4 years ago

Looks great! Will play with it a bit, add some doc and then push to npm soon. Thanks for your work!

timqian commented 4 years ago

I did some updates https://github.com/timqian/chart.xkcd/commit/abe5d809506612d74e2afab2c3a9d4f27464788e and have published this new chart type to npm and website.

And also a celebration tweet 😅https://twitter.com/Tim_Qian/status/1201084108727676928

Thank you again 😊 @matt3play