Support negative values in Vertical Bar or Stack bar charts

[cyrilf]

When using the awesome Chart builder site, it seems like

VueUiVerticalbar and VueUiStackbar doesn't support negative values correclty.

VueUiVerticalbar	VueUiStackbar

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:

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]

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

[graphieros]

@cyrilf

You can upgrade to v2.3.34 which adds support for negative values for VueUiStackbar and VueUiVerticalBar

Documentation website is up to date, here is VueUiStackBar in action:

https://github.com/user-attachments/assets/18bd091b-c77e-4baf-bbf6-1b781ea57316

...and VueUiVerticalBar:

https://github.com/user-attachments/assets/f6c148ba-bfa4-4a4c-b940-1fa2bcf9f337

[cyrilf]

Oh woah! :sparkles: I felt like you were going to be reactive.. but that's.. VERY FAST! :smile:

Thanks a lot for that, I'll have a look on my freetime, very very nice! :clap:

[graphieros]

@cyrilf you are welcome:)

I do think there is still room for a new component that can make pyramid-like bars with multiple series, that is properly centered.

[graphieros]

Hey @cyrilf

I think you might be interested in the addition made to VueUiStackbar in v2.3.45

[cyrilf]

Hey, thanks for notifying me and thanks for this new option. Indeed, that's really cool! I've just opened a PR#5 in the doc website to be able to add a new serie into the dataset (so that I can try to add a 3rd serie and see the rendering for my "pyramid" use case).

[graphieros]

Thanks for pointing that out @cyrilf, the button was added (and website includes your PR)

[cyrilf]

I think the missing things to completly match my previously shared screenshot in this issue thread would be:

• Add a min/max option for the xAxis so that it spreads evenly
• Add a formatter for the xAxis (to use Math.abs on the negative values)
• Add a formatter for the tooltip content values (to use Math.abs on the negative values)
• Add a formatter for the data table values (to use Math.abs on the negative values)

But, honestly, I think that using 3 series with positive values would do the trick and avoid all these required complexities. Especially because my final render still has the issue where the bar of the "Non renseigné" is on the right side and not balanced. I just need to negociate this with the client 😉 So, we're good! 😃

Thanks for all the efforts in making this horizontal StackBar possible 👌

[graphieros]

@cyrilf I added scaleMin and scaleMax config attributes to VueUiStackbar in v2.3.46.

As for the complexities you referred to in you previous message, it does look artificial. I'm still thinking of a new component that would show centered bars. It's an interesting challenge, we'll see.

[cyrilf]

Haha, awesome! Thanks! As for the new component, I don't know. We went for the pyramid chart at first because it makes perfect sense for these kind of visualizations. But now that the requirements have changed, I think that a normal horizontal stack bar is enough. I'm not sure that a component showing centered bars would make more sense. I don't think it would be easier to get the information (especially because of the x scales).

[graphieros]

I agree with your take regarding your use case.

After giving it some thought, centered bars would not be very readable anyways. It's already hard for the eyes to use a classic stacked bars, so introducing variable x scales for each row would make a mess of it all.

I'm glad your requirements are inline with a more traditional chart type:)