[FEATURE REQUEST] VueUiStackbar - Position stacked bar total on top of bars

[ltickett]

We are currently transitioning our contributor platform from vue3-apexcharts to vue-data-ui.

Thank you for the great library, and support so far:

• [BUG] VueUiStackbar selectLegend emit does not return current visible series when selecting / unselecting the legend. #260
• [FEATURE REQUEST] Add methods to programmatically show and hide series #261

I hope our team may be able to help contribute in the future.

The stacked bar coming from vue3-apexcharts allows us to place totals directly above/on top of the bars:

But are current WIP using vue-data-ui shows these totals at the very top of the canvas:

I couldn't find a setting for this- but perhaps you could confirm it doesn't exist?

Assuming it does not, would you consider adding it, or giving us a few pointers so we may attempt to add it?

cc @dennismeister93

[graphieros]

@ltickett
Thanks for choosing vue-data-ui, and for the constructive issues :)

It is indeed not currently possible to show totals on top of bars, and it does look clumsy and unreadable to have them all at the top of the chart. I'll include this in the next patch, which I'm planning to publish today or tomorrow.

Cheers

[ltickett]

Amazing- really appreciate it, thank you @graphieros 🙏

[graphieros]

@ltickett
@dennismeister93

Fixed in 3.5.1

• Note that you can increase the Y offset of totals using: config.style.chart.bars.totalValues.offsetY (default: 0), or .offsetX if you choose the horizontal orientation.

• The total can also be made visible in the tooltip by enabling the following config attribute:

  config.style.chart.tooltip.showTotal (default: false)
  and using your translation for the label in
  config.style.chart.tooltip.totalTranslation (default: 'Total')

• I can also recommend you try out the zoom minimap with: config.style.chart.zoom.minimap.show set to true (I think it looks great, but that's my opinion^^).

Cheers

[graphieros]

@ltickett
@dennismeister93

I'm following your migration from apex to vue-data-ui and noticed you were expecting VueUiXy to behave differently in stacked mode. Unfortunately this component does not have the same stacking features that would equate to what VueUiStackbar provides.

Just to let you know I'm working on a VueUiStackline component that will do just that, with almost the same API as VueUiStackbar (mild differences on lines vs bars options basically). It should take me a week to finish + test + document + polish, maybe 10 days max.

VueUiXy was built gradually without this in mind, and cramming this kind of functionality would make the API confusing, not to mention that some users rely on the way it stacks series; that's why another dedicated component is the best option.

Cheers

[dennismeister93]

@ltickett @dennismeister93

I'm following your migration from apex to vue-data-ui and noticed you were expecting VueUiXy to behave differently in stacked mode. Unfortunately this component does not have the same stacking features that would equate to what VueUiStackbar provides.

Just to let you know I'm working on a VueUiStackline component that will do just that, with almost the same API as VueUiStackbar (mild differences on lines vs bars options basically). It should take me a week to finish + test + document + polish, maybe 10 days max.

VueUiXy was built gradually without this in mind, and cramming this kind of functionality would make the API confusing, not to mention that some users rely on the way it stacks series; that's why another dedicated component is the best option.

Cheers

This is amazing @graphieros ! That would make our lifes much easier! :D I wanted to create a Feature Request for that anyways and than I played a little bit around with the "gap" property. I actually set this to a pretty high negative value (-500) which seems odd, but it pretty much brought it a bit nearer to what we had with apexcharts.. Anyways, now with the upcoming new component it will be much much better! 😍

[graphieros]

@dennismeister93

Allright, game on then :)
I'll let you know when it's done.

[ltickett]

Amazing- thanks @graphieros

I must admit I don't think the demand for the stacked line will be that high (I was probably going to comment on that MR to Dennis that maybe we should just remove that option 😆).

But I really like your shaded and stacked sample image above, so if it's coming then i'm sure we'll take it- thank you!

[graphieros]

@ltickett

Yeah, this kind of visualization tends to be avoided because it makes it hard to read proportions, but it's nevertheless a must have for the lib