Alternate for highcharts-more

Question

As per npm highcharts-more.js is deprecated and we just need to import respective modules from the highcharts folder. But when I try to remove highcharts-more dependency I am getting error. We are trying to build a boxplot using react-highcharts v16.0.2.

I even tried removing highcharts-more.js import from their demo and see that it fails.

Am i missing anything in the implementation aspect here ?

Hi chetna gupta, Highcharts Error #17 indicate that you want to use series type which is not exist. Probably your series type is supported only with highcharts-more module. — ppotaczek, Jul 20 '18 at 13:34
@ppotaczek Yes we are trying to plot a box plot graph but we don’t want to use any deprecated dependency in our application hence wanted to know how can we have a box plot graph plotted without using highcharts-more.js ?? — Chetna Gupta, Jul 21 '18 at 16:33
@chetnagupta as mentioned _this package has been deprecated, just import modules from the highcharts folder_ you can import from the highcharts itself. If you already did this than update you post to [mcve](https://stackoverflow.com/help/mcve) post — Deep 3015, Jul 22 '18 at 11:40
@Deep3015 I have created a basic boxplot example here https://jsfiddle.net/ex47pmnu/1/ As per the documentation just importing highcharts.js should work with boxplot series type but this doesnt work. Is there anything which we are missing ? — Chetna Gupta, Jul 22 '18 at 14:03
Hi chetna gupta, to use 'boxplot' series type, you have to import 'highcharts-more.js' module. As in the answer below, there is no deprecated dependency. https://jsfiddle.net/BlackLabel/6eurz2pL/ — ppotaczek, Jul 23 '18 at 10:24

score 4 · Answer 1 · answered Jul 22 '18 at 17:18

4

Import required dependencies as

import ReactHighchart from 'react-highcharts';
import HighchartMore from 'highcharts/highcharts-more';
HighchartMore(ReactHighchart.Highcharts);

StackBlitz Demo

There is no deprecated dependency

answered Jul 22 '18 at 17:18

Deep 3015

9,929
5
30
54

score 0 · Answer 2 · answered Oct 28 '20 at 01:46

Try highcharts-react-official instead of react-highcharts:

import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts";
import HighchartSankey from "highcharts/modules/sankey";
import HighchartsWheel from "highcharts/modules/dependency-wheel";
import HighchartsReact from "highcharts-react-official";

HighchartSankey(Highcharts);
HighchartsWheel(Highcharts);

const Viz = () => {
  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={{
        series: [{
          type: "dependencywheel",
          data: [{
            from: "Category1",
            to: "Category2",
            weight: 2
          }, {
            from: "Category1",
            to: "Category3",
            weight: 5
          }]
        }]
      }}
    />
  );
};

render(<Viz />, document.getElementById("root"));

Alternate for highcharts-more

2 Answers2

Linked