cannot use boost
daolou opened this issue · comments
Kha'Zix commented
🔥Before Submitting an issue 🔥
It throw: Cannot read property 'hasOwnProperty' of undefined
code:
import * as React from 'react';
import ReactHighcharts from 'react-highcharts';
import { Options } from 'highcharts';
import Boost from 'highcharts/modules/boost';
Boost(ReactHighcharts.Highcharts);
const generateData: number[] = [];
for (let i = 0; i < 10000; i++) {
generateData.push(~~(Math.random() * 200));
}
const fetchData = (): Promise<any> =>
new Promise((resolve) => {
setTimeout(resolve, 2000, generateData);
});
const defaultConfig: Options = {
chart: {
zoomType: 'x',
},
boost: {
useGPUTranslations: true,
},
title: {
text: 'Point interval unit is one month',
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%Y-%m',
},
},
plotOptions: {
series: {
pointStart: Date.UTC(2015, 0, 1),
pointIntervalUnit: 'month',
},
},
series: [],
};
const getChartOption = (data: any) => {
// @ts-ignore
defaultConfig.series = [{ data }];
console.log(defaultConfig)
return defaultConfig;
}
const Charts: React.FC<{}> = () => {
const [data, setData] = React.useState<number[]>([]);
const getData = async () => {
const res: number[] = await fetchData();
console.log(res);
setData(() => res);
};
React.useEffect(() => {
getData();
}, []);
return <ReactHighcharts config={getChartOption(data)} />;
};
export default React.memo(Charts);
// export default Charts;
miniRepo
codeSandbox: https://codesandbox.io/s/angry-rhodes-jp6tl?file=/src/Chart.tsx
Versions:
- highcharts: v8.1.2
- react-highcharts: v16.1.0
Kha'Zix commented