xaxis categories don't update with line chart (but do so with bar chart) #46
Description
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;
'