Issue with VueUI Stacked Bar Rendering Data Incorrectly

[Vivek-kumar19]

Hi there!

I’m using VueUI Stacked Bar and passing the following dataset into my component:
[
{
"name": "gold members",
"series": [0],
"color": "#E2C761"
},
{
"name": "standard members",
"series": [0],
"color": "#DCE0E6"
},
{
"name": "local members",
"series": [1],
"color": "#153457"
}
]
However, I’m facing an issue with how this data is being displayed in the UI. I’ve attached a screenshot for reference. Could you please help me understand what might be causing this issue?

[graphieros]

Hi @Vivek-kumar19
You need to tweak the config for the rounding of the scale of the axis labels. The chart automatically creates a scale based on your dataset, and has no rounding by default.

[Vivek-kumar19]

Thanks for your response! However, this isn't very helpful for me. Could you provide a more specific solution or point me to the exact configuration I need to adjust? Also, is there a particular reason why this issue occurs, so I can understand how to address it better?

[graphieros]

@Vivek-kumar19

I was on the road so couldn't answer properly:) Config was missing a rounding attribute to address this kind of use case where 10 scale ticks need to be generated between 0 and 1.

You can upgrade to v2.6.12 and set

config.style.chart.grid.y.axisLabels.rounding: 1

This will show decimals in scale labels.

[Vivek-kumar19]

Thanks to this, it's working great now! 🎉