1

I'm starting a project I want to adapt a Highchart stockChart react component to a regular Highchart (chart) component. I was adjusting it on a demo and everything was working fine.

When I moved to my local project I couldn't change constructorType from stockChart to chart, it compiles but when I try to run the application I get this error

TypeError: t[n] is not a function

t

C:/src/HighchartsReact.js:30


  27 | const H = props.highcharts || Highcharts;
  28 | const constructorType = props.constructorType || 'chart';
  29 | 
> 30 | if (!H) {
     | ^  31 |   console.warn('The "highcharts" property was not passed.');
  32 | 
  33 | } else if (!H[constructorType]) {

(anonymous function)

C:/src/HighchartsReact.js:52

  49 | }
  50 | 
  51 | if (!chartRef.current) {
> 52 |   createChart();
     | ^  53 | } else {
  54 |   if (props.allowChartUpdate !== false) {
  55 |     if (!props.immutable && chartRef.current) {

My local project runs same dependencies as the demo, I have no clue why I'm facing this TypeError. According to documentation this is the default call.

Community
  • 1
  • 1
Bernardo Marques
  • 925
  • 2
  • 10
  • 33
  • I just reproduced your demo https://codesandbox.io/s/stacked-column-sample-v2-dm9et?file=/src/Example.json on the new local project and everything works fine. For: `import Highcharts from "highcharts/highstock"` works `constructorType="stockChart"` and `constructorType="chart"`. Do you have any additional options which could have an impact on it in your project? – Sebastian Wędzel Apr 29 '20 at 13:54
  • I think I found the reason, on my local project I was passing some options with `Highcharts.chart = {...}` and then using `Highcharts.setOptions(Highcharts.chart)` before the component creation. Doing that for highstock works fine. – Bernardo Marques Apr 29 '20 at 14:27
  • It is advised to set options in the state to avoid any issues, especially issues connected with the chart update - I am 100% sure that doing an update with state options destroys completely previous chart and render the new one - with clean DOM etc, but we don't have test it how it will work with using Highcharts.setOptions. – Sebastian Wędzel Apr 29 '20 at 14:38

1 Answers1

3

I had this issue and it was as you have to specifically pass the main Highcharts object down to HighchartsReact like so:

import Highcharts from "highcharts";

return (
        <HighchartsReact
            highcharts={Highcharts}
            options={hiChartsOptions}
        />
    );
Jack
  • 2,891
  • 11
  • 48
  • 65