Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

xaxis labels showing weird(incorrect) values #4067

Closed
BlvckParrot opened this issue Oct 19, 2023 · 3 comments · Fixed by Plant-for-the-Planet-org/planet-webapp#2243 · 4 remaining pull requests
Closed

xaxis labels showing weird(incorrect) values #4067

BlvckParrot opened this issue Oct 19, 2023 · 3 comments · Fixed by Plant-for-the-Planet-org/planet-webapp#2243 · 4 remaining pull requests
Labels
bug Something isn't working

Comments

@BlvckParrot
Copy link

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:
Snímek obrazovky 2023-10-19 v 13 52 28

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.

Snímek obrazovky 2023-10-19 v 13 53 21

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

Snímek obrazovky 2023-10-19 v 14 01 10 Snímek obrazovky 2023-10-19 v 14 03 30

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.

Snímek obrazovky 2023-10-19 v 14 18 11

@89erik
Copy link

89erik commented Oct 31, 2023

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
Copy link

acocheo commented Jul 19, 2024

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

@BlvckParrot
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment