I have a Highcharts
graph on my React page and I redraw it after getting data by updating the state hook. This works well in development mode without any issues.
However, after npm run build and starting the application I get the error:
TypeError: Cannot read properties of undefined (reading 'activeDataLabelStyle')
If I leave the page and come back, the graph updates without any problems on selection but will still throw an error if I select to display after refreshing the page.
const [options, setOptions] = useState({
title: {
text: 'Speed of vehicle over time',
},
subtitle: {
text: 'Select an area on the chart to zoom in.',
},
chart: {
zoomType: 'x',
},
series: [
{
data: [],
},
],
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%H:%M', this.value);
},
},
title: {
text: 'Time',
},
},
yAxis: {
title: {
text: 'Speed (m/s)',
},
},
});
async function handleSelect(selected, setLoading) {
const journey = await axios.get('/api/getJourney?id=' + selected.id);
console.log(journey.data);
setOptions({
series: [
{
data: journey.data,
name: 'Vehicle ' + selected.id,
},
],
});
setLoading(false);
}