Misplaced horizontal labels in horizontal bar chart

[pokecheater]

Hey Apexchart-Team,

Problem

I noticed that the labels are misplaced, when the numbers have different rods.
It is tiny but with more data it looks like a mess. Labels are not evenly starting on the x axis. Look for netherlands and south korea for example.

Even in your official examples page you can see this effect:

https://apexcharts.com/javascript-chart-demos/bar-charts/custom-datalabels/

Code 2 reproduce

`
var options = {
series: [{
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
}],
chart: {
type: 'bar',
height: 380
},
plotOptions: {
bar: {
barHeight: '100%',
distributed: true,
horizontal: true,
dataLabels: {
position: 'bottom'
},
}
},
colors: ['#33b2df', '#546E7A', '#d4526e', '#13d8aa', '#A5978B', '#2b908f', '#f9a3a4', '#90ee7e',
'#f48024', '#69d2e7'
],
dataLabels: {
enabled: true,
textAnchor: 'start',
style: {
colors: ['#fff']
},
formatter: function (val, opt) {
return opt.w.globals.labels[opt.dataPointIndex] + ": " + val
},
offsetX: 0,
dropShadow: {
enabled: true
}
},
stroke: {
width: 1,
colors: ['#fff']
},
xaxis: {
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
'United States', 'China', 'India'
],
},
yaxis: {
labels: {
show: false
}
},
title: {
text: 'Custom DataLabels',
align: 'center',
floating: true
},
subtitle: {
text: 'Category Names as DataLabels inside bars',
align: 'center',
},
tooltip: {
theme: 'dark',
x: {
show: false
},
y: {
title: {
formatter: function () {
return ''
}
}
}
}
};

    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();

`

My Browser

I noticed this behaviour in all my browsers:

• Brave
• Firefox
• Safari

[pokecheater]

I noticed inside the code, that the x and cx values are indeed misplaced. Maybe this helps you to find the cause of the issue faster: