Stacked column chart labels overlap with small values

[clewisln]

There are display issues with the labels, when using the stacked mode of a bar chart. Additionally, I am seeing an issue with the positioning of the bars themselves in some cases as well.

In the image, columns with small values will not reserve enough space for the label, causing it to be displayed to the outside. However, the positioning logic does not seem to take into account when the chart is stacked, causing label overlaps if both columns are low value.

Additionally, in the screenshot, for 4th row, you can see that the red and yellow bars are overlapped. It seems that the yellow bar is taking the full width and the red bar is slightly offset, instead of being properly stacked on each other. [Not applicable; data issue]

Data for the two bottom rows:

[
    [
        "perceivable 1.1.1",
        1,
        76
    ],
    [
        "perceivable 1.3.1",
        206,
        6334
    ]
]

JS:

const column = new Column()
	.paletteID('cat-err-warn')
	.orientation('vertical')
	.showValue(true)
	.valueCentered(true)
	.yAxisStacked(true)
	.yAxisType('linear')
	.xAxisType('ordinal')
	.xAxisTitle('');

panel = new ChartPanel()
	.widget(column)
	.target(svgRef.current)
	.columns(['Guideline', 'Error Occurrences', 'Warning Occurrences'])
	.data(counts)
	.legendVisible(true)
	.legendPosition('bottom')
	.legend_labelAlign('middle')
	.legend_showSeriesTotal(true)
	.title('title')
	.downloadButtonVisible(false)
	.render();

[clewisln]

It was confirmed that issue 2, where the red bar is offset, was due to duplicative ids in the data set. It has been corrected on my side.

Thanks for your assistance!