xaxis categories don't update with line chart (but do so with bar chart)
See original GitHub issueI’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; ’
Issue Analytics
- State:
- Created 5 years ago
- Comments:8 (1 by maintainers)
Top GitHub Comments
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.
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”