xaxis categories don't update with line chart (but do so with bar chart)

[stevray]

I'm fetching data from an api that returns data for both the series and the x-axis categories properties. The api call and state updating is done within componentDidMount. This all works fine when the chart type is a bar chart, but the xaxis state won't update when the chart type is changed to a line chart. Any help you could provide would be greatly appreciated. Thanks!

`
import React, { Component } from 'react';
import Chart from 'react-apexcharts';

class WAUchart extends Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
id: "WAU"
},
xaxis: {
type: "category",
categories: []
},
title: {
text: "WAU",
align: "center",
style: {
fontSize: "20px",
color: "black"
}
},
labels: []
},
series: [
{
name: "WAU",
data: []
}
],
};
};

fetchData() {
    fetch('http://127.0.0.1:5000/wau?start_time="2018-05-01"')
        .then(response => response.json())
        .then(dat => {
            const newSeries = [];
            const newXaxis = JSON.parse(dat.xaxis);
            newSeries.push({ data: JSON.parse(dat.series), name: this.state.series[0].name });
            this.setState({
                series: newSeries,
                options: { ...this.state.options, labels: newXaxis, xaxis: { ...this.state.options.xaxis, categories: newXaxis } }
            });
            console.log(this.state.options);
        })
};

componentDidMount() {
    this.fetchData()
};

render() {
    return (
        <Chart
            options={this.state.options}
            series={this.state.series}
            type="line"
            height="450"
            width="100%"
        />
    )
}

}

export default WAUchart;
'

[junedchhipa]

I suspect this is a bug which is caused by the latest update.
Can you try changing xaxis.tickPlacement: 'between'?

If the above change fixes the issue, I will be sure of the cause of this bug and will work on it.

[stevray]

That fixes the issue! Thanks!

[rsmani]

Hi, this issue seems to be still there when using "react-apexcharts": "^1.3.3", and "apexcharts": "^3.8.6",.

As earlier, it gets resolved if I use xaxis.tickPlacement: 'between'.

[mkantz84]

I'm facing the same issue, but using xaxis.tickPlacement: 'between' does not resolve the issue in my case.. PR94

versions:
"react-apexcharts": "^1.3.3"
"apexcharts": "^3.8.6"

[uhrb]

Have same for
"apexcharts": "^3.19.3",
"vue-apexcharts": "^1.6.0",

[ivanhoinacki]

For me to solve using this method..

var chart = new ApexCharts(el, {
chart: {
id: 'mychart',
type: 'area'
},
series: [{
data: [2, 33, 14, 8]
}]
});

ApexCharts.exec('mychart', 'updateOptions', {
xaxis: {
labels: {
show: false
}
}
}, false, true);

ApexCharts.exec('mychart', 'updateSeries', [{
data: [32, 44, 31, 41, 22]
}], true);

[Maetes]

I tried hours to solve this... after finding xaxis.tickPlacement: 'between' I can enjoy my weekend (:

[Sidneycarlinijr]

After hours -> xaxis.tickPlacement: 'between' ftw

[Habestt]

Hi, this issue seems to be still there when using "react-apexcharts": "^1.3.3", and "apexcharts": "^3.8.6",.

As earlier, it gets resolved if I use xaxis.tickPlacement: 'between'.

Oh, my God. It's 2025 and this bug is still there. i spent 4 hours trying to figure out what the problem is and what i'm doing wrong. thank you so much.

[EnigmaSn]

@junedchhipa xaxis.tickPlacement: 'between' is a workaround, but how to stretch xaxis to full width now?