Highcharts Error #17 The requested series type does not exist

[zyMacro]

when I plot an chart whose type is 'solidgauge', It went to an error. After I search for material,I tried below code , but same error comes.

`var ReactHighcharts = require('react-highcharts');

var HighchartsMore = require('highcharts-more');

HighchartsMore(ReactHighcharts.Highcharts);

var HighchartsExporting = require('highcharts-exporting');

HighchartsExporting(ReactHighcharts.Highcharts);

require('highcharts/js/highcharts-more')(ReactHighcharts.Highcharts);`

How can I deal with it?

[zyMacro]

I have added below code to deal with this problem. require('highcharts/modules/solid-gauge.js')(ReactHighcharts.Highcharts);

[aaronbeall]

Ran into the same problem, your workaround nor the one in the readme is working, though. I can render a normal line chart, but I can't render a solid gauge.

[aaronbeall]

This ended up working through the initial barrage of runtime errors:

const ReactHighcharts = require("react-highcharts");

require("highcharts/js/highcharts-more")(ReactHighcharts.Highcharts);
require("highcharts/js/modules/solid-gauge.js")(ReactHighcharts.Highcharts);

const config: Options = {
  chart: {
    type: "solidgauge"
  },
  // ...
}

<ReactHighcharts config={config} />

However, the gauge doesn't render properly. For example, the bar background doesn't render, even if I copy paste the gauge-activity demo config code. The rest of the gauge does render, though the labels and such are mis-aligned. :hurtrealbad:

[lorezzed]

Import the whole package instead of specific files and it should work ok with the proper styling

// `highcharts-more` needs to load before gauge
require('highcharts-more')(ReactHighcharts.Highcharts)
require('highcharts-solid-gauge')(ReactHighcharts.Highcharts)

[spacedarcy]

@aaronbeall's solution works for xrange series, but @lorezzed 's does not, as webpack can't resolve the module.

Update: adding 'highcharts-xrange-series': path.resolve(__dirname, 'node_modules/highcharts/modules/xrange-series.js') to webpack's resolve.alias seems to have fixed this.

[yanbeixiang]

@spacedarcy hi. Same configuration, Originally should get the following result: xrange-dome

But in ReactHighcharts it is such a result:

Do you know why？

[ilyjs]

Hi @yanbeixiang ! Look at my example https://stackblitz.com/edit/react-mcob3t

[yanbeixiang]

@ilyjs thanks. But your example can’t access

[ilyjs]

@yanbeixiang sorry! https://stackblitz.com/edit/react-highcharts-xrange

[yanbeixiang]

@ilyjs thank you very much.

[rishabh0206]

This works if you want to use import instead of require -

import * as Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import highcharts from "highcharts/modules/bullet";
highcharts(Highcharts);

[1xKarthik]

This worked for me for React for speedometer/Guage: https://www.highcharts.com/blog/snippets/speedometer-with-animation/

import Highcharts from 'highcharts';
import HighchartsReact from "highcharts-react-official";
import HC_more from 'highcharts/highcharts-more'
import Guage from "highcharts/modules/solid-gauge";

HC_more(Highcharts);
Guage(Highcharts);

options = {
    chart: {
      type: 'gauge'
    },
}