ReferenceError: Highcharts is not defined when using lollipop series in react

Question

Seeing the below error when trying to render a lollipop chart in react using the highcharts-react-official module. If I change the series type to line it renders fine
ReferenceError: Highcharts is not defined

Example Code:

import Highcharts, {Options} from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

const options: Options = {
  chart: {
    type: 'lollipop'
  },
  series: [{
    name: 'Example Series',
    type: 'lollipop',
    data: [10, 20, 50, 30, 100]
  }]
}

const ExampleComponent = () => (
  <HighchartsReact
    highcharts={Highcharts}
    options={options}
  />
)

madepiet · Accepted Answer · 2021-06-01 09:53:17Z

0

Remember to load the necessary modules correctly: https://github.com/highcharts/highcharts-react#how-to-add-a-module

You can find a simple demo here: https://stackblitz.com/edit/react-hnwmgd?file=index.js

import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import HC_more from "highcharts/highcharts-more";
import highchartsDumbbell from "highcharts/modules/dumbbell";
import highchartsLollipop from "highcharts/modules/lollipop";

// init the module
highchartsDumbbell(Highcharts);
highchartsLollipop(Highcharts);
HC_more(Highcharts);

edited Jun 1, 2021 at 9:53

answered Jun 1, 2021 at 9:45

madepiet

8941 gold badge5 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Teo · Accepted Answer · 2024-01-23 12:38:25Z

0

If you are using Typescript, the initialization should be done directly in the React component.

If you initialize the module outside the component, you might encounter a TypeError after updating your app.

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import HighChartsMore from "highcharts/highcharts-more";
import dumbbell from "highcharts/modules/dumbbell";
import lollipop from "highcharts/modules/lollipop";

const options = {...};

const ExampleComponent = () => {
    // module initialization
    HighChartsMore(Highcharts);
    dumbbell(Highcharts);
    lollipop(Highcharts);

    
    return <HighchartsReact highcharts={Highcharts} options={options} />;
}

edited Jan 23, 2024 at 12:38

answered Oct 17, 2023 at 14:09

Teo

413 bronze badges

Comments

Uroš Barjaktarević · Accepted Answer · 2024-03-20 06:51:30Z

0

Let me just add that you need to import both the dumbbell and the lollipop series if you want to use lollipop, and that the imports HAVE TO BE in that order:

HighchartsDumbbell(Highcharts);
HighchartsLollipop(Highcharts);

and not:

HighchartsLollipop(Highcharts);
HighchartsDumbbell(Highcharts);

answered Mar 20, 2024 at 6:51

Uroš Barjaktarević

315 bronze badges

Collectives™ on Stack Overflow

ReferenceError: Highcharts is not defined when using lollipop series in react

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related