search

carbon-design-system / carbon-charts

:bar_chart: :chart_with_upwards_trend:⠀Robust dataviz framework implemented using D3 & typescript
https://charts.carbondesignsystem.com
Apache License 2.0
908 stars 184 forks source link

[Enhancements]: Add support for multiple datasets in bounded area chart #1216

Closed anbnyc closed 2 years ago

anbnyc commented 2 years ago

Contact Details

No response

What happened?

When I create a bounded area chart with one group, I have lines for min, value, and max and I can apply the option includeZero: false (works as expected). When I add a second group, two things break: now the lines only show value, not min and max, and includeZero no longer works, which means that the areas appear below the X axis:

image

My most preferred fix would be to show min, value, and max lines and bounded areas for both groups. An OK alternative would be to show the value lines for both groups, keep the Y axis the same, and hide the area under the curve. My least preferred fix would be to show the value lines and areas and change the axis to include 0.

Thank you.

Version

@carbon/charts@0.51.3

Data & options used

No response

Relevant log output

No response

Codesandbox example

https://codesandbox.io/s/pedantic-ptolemy-zs0h9?file=/src/components/chart.vue

Akshat55 commented 2 years ago

Hi @anbnyc,

Currently we only support 1 data group for bounded area chart hence the console warning, Bounds can only be shown when having 1 single datagroup...

Akshat55 commented 2 years ago

Issue #1248 fixes the include zero bug, we are still waiting for design approvals for enabling multiple datasets in bounded area chart.

Akshat55 commented 2 years ago

After some discussions with designers, we have decided to not add support for multiple datasets in bounded area chart. Adding multiple bounds will result in the chart getting crowded and unreadable. On top of that, we could potentially lose the 3 to 1 contrast between the bounds on overlap.

However, if you absolutely must... you should be able to work around this by using combo charts with multiple bounded area charts. Probably, best to avoid since it may raise accessibility issues.

theiliad commented 2 years ago

I'll close for now. Feel free to respond with additional info or feedback 🙂