Search code examples
javascriptreactjshighcharts

Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=xrange - missingModuleFor: xrange

I created a simple demo for xrange but

import React from 'react'
import { render } from 'react-dom'
import Highcharts from 'highcharts/highcharts';
import 'highcharts/modules/xrange';
import HighchartsReact from 'highcharts-react-official'

// For Line/Stock
// const options = {
//   title: {
//     text: 'My chart'
//   },
//   series: [{
//     data: [1, 2, 3]
//   }]
// }

const ganttData = [
  {
    name: 'Task 1',
    start: '2023-01-01',
    end: '2023-01-07',
  },
  {
    name: 'Task 2',
    start: '2023-01-07',
    end: '2023-01-14',
  },
  // Add more tasks as needed
];

const options = {
  chart: {
    type: 'xrange',
  },
  title: {
    text: 'Gantt Chart Example',
  },
  accessibility: {
    point: {
        descriptionFormat: '{add index 1}. {yCategory}, {x:%A %e %B %Y} to {x2:%A %e %B %Y}.'
    }
  },
  xAxis: {
    type: 'datetime',
  },
  yAxis: {
    title: {
      text:''
    },
    categories: ['Prototyping', 'Development', 'Testing'],
    reversed: true
  },
  series: [
    {
      name: 'Tasks',
      data: ganttData,
    },
  ],
};


function App() {
  return (
    <div className="App">
      {/* <HighchartsReact
        highcharts={Highcharts}
        options={options}
      />
      <HighchartsReact
        highcharts={Highcharts}
        constructorType={'stockChart'}
        options={options}
      /> */}
      <HighchartsReact highcharts={Highcharts} options={options} />
    </div>
  );
}

export default App;

but I get following error enter image description here

The highchart version is 11.1.0 I can see highchart/modules/xrange is available in highcharts package what is the issue? I just followed https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/x-range in reactjs application

Solution 
  • import Highcharts from "highcharts/highcharts";
import XRangeModule from "highcharts/modules/xrange";

XRangeModule(Highcharts);

    should do the trick if i'm not mistaken.

    in jsfiddle the highcharts modules get loaded in global scope due to script tags. In js modules you have to decorate highcharts that way since... well... it's not in global scope.