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

how to use highcharts-boost in files?

Sunzhuoyi opened this issue · comments

Before Submitting an issue please reproduce it in JSBin using this setup:
http://qs.js.org/jsbin/react-highcharts?autostart
I install highcharts-boost and then require it in files like this
require('highcharts-boost');
in my ReactHightcharts config i write like this
boost: { useGPUTranslations: true },
but when i draw my page, i feel it does not work ,why ? what should i do ?

I hope this information will help you.
Look it up #227
boost module has many features for which the diagram may not work.
@mathiasconradt made this sandbox https://jsfiddle.net/fmfmxq9s/2/
And wrote an explanation in this issue
there is another sandbox
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/boost/scatter/
If you add usePreAllocated: true in https://jsfiddle.net/fmfmxq9s/2/ then it begins to work.

 boost: {
        useGPUTranslations: true,
        usePreAllocated: true
    },

Your link is broken http://qs.js.org/jsbin/react-highcharts?autostart

Use modules highcharts! highcharts/modules/.....

import Boost  from 'highcharts/modules/boost'; 

or

let Boost =  require('highcharts/modules/boost');
Boost(ReactHighcharts.Highcharts);

highcharts-boost deprecated

@ilyjs thanks , but it does not work . may be react-highcharts's release don't match highchart-boost(https://www.npmjs.com/package/highcharts-boost)
@kirjs highchart-boost has not been updated for 2 years,there is something wrong with react-highchart

@Sunzhuoyi Now it is recommended to use modules only import ... from 'highcharts/modules/......';
or require
highchart-boost deprecated.
import Boost from 'highcharts/modules/boost'; Works for me 100%

If you show an example code, I can help you
Put a small sample code here https://stackblitz.com/
or copy into the message between ```

@ilyjs thanks again.The cause of the problem has been found.In typescript, boost should be introduced in this way.
import * as Boost from 'XXX'
not
import Boost from 'XXX

@Sunzhuoyi I'm glad I could help you.

var Highcharts = require('highcharts');
require('highcharts/modules/boost')(Highcharts);

or

import Highcharts from 'highcharts'
import boost from 'highcharts/modules/boost';
boost(Highcharts);

@ilyjs @kirjs How to use highcharts boost along with highcharts more ? For react highcharts

@ilyjs @kirjs boosting Highcharts works for me great. But I've issue with boosting ReactHighcharts.Highcharts. It still works badly for 150k items.

import ReactHighcharts from 'react-highcharts';
import Boost from 'highcharts/modules/boost';
Boost(ReactHighcharts.Highcharts);
"react-highcharts": "^16.0.2",
"highcharts": "^7.0.3"

Can you suggest anything? While boosting Highcharts itself - works great :)