search

graphieros / vue-data-ui

A user-empowering data visualization Vue 3 components library for eloquent data storytelling
https://vue-data-ui.graphieros.com/
MIT License
913 stars 38 forks source link

Support negative values in Vertical Bar or Stack bar charts #88

Open cyrilf opened 14 hours ago

cyrilf commented 14 hours ago

When using the awesome Chart builder site, it seems like

VueUiVerticalbar and VueUiStackbar doesn't support negative values correclty.

VueUiVerticalbar VueUiStackbar
image image

From quickly checking in the code, it seems like this line always start the axis at 0 and not the min value. Maybe that's a good start to investigate.

Context:

In my current project, I'm using ApexCharts; and in order to achieve an age pyramid with 3 gender types, I have to use a Horizontal Stack bar, with one serie having negative values (to appears on the left) and the two other ones, positive values (to be on the right). (I then use Math.abs in all formatters to display the correct value (labels, tooltips and so on) I haven't checked yet, but I believe your library supports these customization too?). Obviously, that's not perfect, as the third one should be balanced between left and right, but for now, that does the job. You can see the results in this picture:

Screenshot from 2024-10-10 15-14-06

Relates to #87

Side note:

Thanks for this lib, that's an impressive amount of work. :sparkles: (I just discovered it and I'm considering it for an ongoing project).

graphieros commented 13 hours ago

HI @cyrilf :)

Currently both of these charts don't support negative values, they were designed for positive use cases only. I've been considering however to change this for a while now, so your issues are a good incentive to do so.

As for the centered horizontal bar chart use case, I think it will require a new specific component, that would not require hacks to change dataLabels.

I'll keep you posted when it's rolled out.

PS. Et merci pour les encouragements :)