xaxis labels showing weird(incorrect) values

[BlvckParrot]

Description

The x-axis labels are displayed in mismatched values as decimal numbers, even though the data for the chart is integers.

Steps to Reproduce

1. install latest version of apexcharts
2. create basic bar chart
3. provide data as this:

notice that x coordinate values are integers.

Expected Behavior

The labels on the x-axis should correspond to the data provided as the tooltip label does.

Actual Behavior

The labels on the x-axis do not correspond to the data provided.

Also, the values change when you console.log them or not:

Reproduction Link

I recreated the code several times template Codepen here StackBlitz TypeScript here StackBlitz React here

When the problem occured

I found out that the problem occured in versions from @3.6.12 and above, the previous versions(@3.6.11 and lower) are working as expected.

[89erik]

I'm having a similar issue probably caused by the same bug. In a rangeBar chart where the ranges in the y-axis are floats, e.g. [1.1, 1.2], the tooltip always shows them as integers e.g. "1 - 1". If i define tooltip.y.formatter, receiving two arguments (value, obj), then I see that it is called 7 times. The first two times (one per item in the range) it is called with integers as value and the object is undefined. The return value from these are assumedly the ones that are shown in the GUI. Then it is called once with the float value of the second part of the range, but still no object. Then finally two times for both parts of the range, with both the float value and the object containing series, seriesIndex etc). These latter four calls (although only two should suffice) have the correct arguments and should be the ones used to actually display the values, but they are not.

How to reproduce:

const options = {
    series: [
        {name: "A", data: [{x: "foo", y: [1.1, 2.1]}, {x: "bar", y: [3.1, 4.1]}]},
        {name: "B", data: [{x: "foo", y: [5.1, 6.1]}, {x: "bar", y: [7.1, 8.1]}]},
    ],
    chart: {
        type: 'rangeBar'
    },
    tooltip: {
        y: {
            formatter: (value, obj) => {
                console.log(value, obj)
                if (obj === undefined) {
                    return "this is always the displayed integer value " + value
                } else {
                    return "The value is now correctly float, and the obj contains rows and row index, but this is never displayed"
                }
            }
        }
    }
}

The log output when hovering the [7.1, 8.1] range:

7 undefined
8 undefined
8.1 undefined
7.1 {series: Array(2), seriesIndex: 1, dataPointIndex: 1, w: {…}}
8.1 {series: Array(2), seriesIndex: 1, dataPointIndex: 1, w: {…}}
7.1 {series: Array(2), seriesIndex: 1, dataPointIndex: 1, w: {…}}
8.1 {series: Array(2), seriesIndex: 1, dataPointIndex: 1, w: {…}}

[acocheo]

Same bug here Those "strange" values seem to be the "auto-generated" ticks of axis, before chart starts using series values

[BlvckParrot]

If you're looking for a quick fix, just convert the labels to string.