CODEWITHSUNDEEP
reactjshighcharts
jay queue
jay queue

Reputation: 415

Error in rendering a React highcharts x-range chart

I am trying to re-create the highcharts x-range demo chart (https://www.highcharts.com/demo/x-range) using the official React wrapper and I'm getting a "ReferenceError: Highcharts is not defined" error. I'm new to both react and highcharts so not sure what I'm missing here

here's the code:

import React, { useState } from 'react';

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const AccountContractHistory = (props) => {

    const [chartOptions, setChartOptions] = useState({
        chart: {
            type: 'xrange'
        },
        title: {
            text: 'Highcharts X-range'
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            title: {
                text: ''
            },
            categories: ['Prototyping', 'Development', 'Testing'],
            reversed: true
        },
        series: [{
            name: 'Project 1',
            // pointPadding: 0,
            // groupPadding: 0,
            borderColor: 'gray',
            pointWidth: 20,
            data: [{
                x: Date.UTC(2014, 10, 21),
                x2: Date.UTC(2014, 11, 2),
                y: 0,
                partialFill: 0.25
            }, {
                x: Date.UTC(2014, 11, 2),
                x2: Date.UTC(2014, 11, 5),
                y: 1
            }, {
                x: Date.UTC(2014, 11, 8),
                x2: Date.UTC(2014, 11, 9),
                y: 2
            }, {
                x: Date.UTC(2014, 11, 9),
                x2: Date.UTC(2014, 11, 19),
                y: 1
            }, {
                x: Date.UTC(2014, 11, 10),
                x2: Date.UTC(2014, 11, 23),
                y: 2
            }],
            dataLabels: {
                enabled: true
            }
        }],
      });

  
    return (
        <div>
                    <HighchartsReact
                        highcharts={Highcharts}
                        options={chartOptions}
                    />
        </div>
    )
};

export default AccountContractHistory;

Would appreciate any help in figuring out what I'm doing wrong

Thanks

Upvotes: 0

Views: 649

Answers (2)

dale
dale

Reputation: 1258

Seeing same error but (using Typescript) for my fix i needed to pass in Highcharts to the xrange like so:

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import xrange from 'highcharts/modules/xrange';
xrange(Highcharts);

and then the markup:

<HighchartsReact
  highcharts={Highcharts}
  options={options}
  {...this.props}
/>

Upvotes: 0

madepiet
madepiet

Reputation: 884

You can find a demo of this chart in React here: https://stackblitz.com/edit/react-highcharts-xrange-demo

You have to remember to properly load highcharts modules: https://github.com/highcharts/highcharts-react#how-to-add-a-module

Upvotes: 1

Related Questions