kirjs / react-highcharts

React wrapper for Highcharts library

Home Page:http://kirjs.github.io/react-highcharts/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

cannot use boost

daolou opened this issue · comments

🔥Before Submitting an issue 🔥

It throw: Cannot read property 'hasOwnProperty' of undefined

image

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

use highcharts@6.2.0, it work well