Apexcharts doesn't show correct value of x in tooltip

Question

I'm trying to render a line chart, with category names shown in the tooltip. I got the following line chart:

let dataCurrent = [
{'x': 'FIRST', 'y': 711}, {'x': 'SECOND', 'y': 709}, {'x': 'THIRD', 'y': 522}
]

let options = {
            chart: {
                type: "line",
                fontFamily: 'inherit',
                height: 150.0,
                sparkline: {
                    enabled: true
                },
                animations: {
                    enabled: true
                },
            },
            tooltip: {
                enabled: true,
                onDatasetHover: {
                    highlightDataSeries: true,
                },
                x: {
                    show: true,
                    formatter: function (value) {
                        console.log(value) // This value should be "FIRST", "SECOND" and "THIRD", but it's 1, 2 and 3
                        return value;
                    },
                },
                y: {
                    formatter: function (val) {
                        return Math.floor(val)
                    }
                }
            },
            dataLabels: {
                enable: true,
                position: 'bottom'
            },
            fill: {
                opacity: 1,
            },
            stroke: {
                width: [2, 1],
                dashArray: [0, 3],
                lineCap: "round",
                curve: "smooth",
            },
            series: [{
                name: dataCurrentName,
                data: dataCurrent
            },
            grid: {
                strokeDashArray: 4,
            },
            xaxis: {
                labels: {
                    formatter: function (value) {
                    console.log(value) // This shows the correct category name
                    return value;
                },
                },
                tooltip: {
                    enabled: false,
                },
                type: "category",
            },
            yaxis: {
                labels: {
                    padding: 4
                },
            },

            colors: [primaryColor, secondaryColor],
            legend: {
                show: false,
                position: 'top',
                offsetY: -3
            },
        };

 let chart = new ApexCharts(document.querySelector("#line-chart"), options);

chart.render();

For some reason, the tooltip of the x axis doesn't show the value of x in dataCurrent. It shows sequential numbers (1, 2, 3), no matter what the category name is.

If I log the value of x in xaxis instead, it shows the correct value. What am I doing wrong?

Answer 1

Currently, you only parsed the value to the tooltip formatter. Please refer to the documentation for the available variables to parse in this formatter. You can find a working example below where the categoryLabel is shown in the tooltip.

Please note that you had some syntax errors in your code as well. I commented them in the working example below.

If you would like to see all the available variables to parse in to the formatter, you can use the function below instead:

formatter: function (value, { series, seriesIndex, dataPointIndex, w }) {
console.log(
    "value:", value + '\n' +
    "series:", series + '\n' +
    "seriesIndex:", seriesIndex + '\n' +
    "dataPointIndex:", dataPointIndex + '\n' +
    "w:", w
);
console.log(w.globals.categoryLabels[value - 1]);
return w.globals.categoryLabels[value - 1]
},

//https://apexcharts.com/docs/options/tooltip/

let dataCurrent = [
    {
        'x': 'FIRST',
        'y': 711
    },
    {
        'x': 'SECOND',
        'y': 709
    },
    {
        'x': 'THIRD',
        'y': 522
    },
]

let options = {
    chart: {
        type: "line",
        fontFamily: 'inherit',
        height: 150.0,
        sparkline: {
            enabled: true
        },
        animations: {
            enabled: true
        },
    },
    tooltip: {
        enabled: true,
        onDatasetHover: {
            highlightDataSeries: true,
        },
        x: {
            show: true,
            formatter: function (value, { w }) {
                // Please refer to documentation, available options are: value, series, seriesIndex, dataPointIndex, w, categoryLabels
                console.log(w.globals.categoryLabels[value - 1]);
                return w.globals.categoryLabels[value - 1]
            },
        },
        y: {
            formatter: function (val) {
                return Math.floor(val)
            }
        }
    },
    dataLabels: {
        enable: true,
        position: 'bottom'
    },
    fill: {
        opacity: 1,
    },
    stroke: {
        width: [2, 1],
        dashArray: [0, 3],
        lineCap: "round",
        curve: "smooth",
    },
    series: [{
        // name: dataCurrentName, // ---> ReferenceError: dataCurrentName is not defined
        data: dataCurrent
    }],
    grid: {
        strokeDashArray: 4,
    },
    xaxis: {
        labels: {
            formatter: function (value) {
                console.log(value) // This shows the correct category name
                return value;
            },
        },
        tooltip: {
            enabled: false,
        },
        type: "category",
    },
    yaxis: {
        labels: {
            padding: 4
        },
    },

    // colors: [primaryColor, secondaryColor], // ---> ReferenceError: primaryColor is not defined
    legend: {
        show: false,
        position: 'top',
        offsetY: -3
    },
};

let chart = new ApexCharts(document.querySelector("#line-chart"), options);

chart.render();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="style.css"> -->
    <title>Test</title>
</head>
<body>
<div id="line-chart"></div>
</body>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</html>