How can I fix the error #17 “The requested series type does not exist” error when trying to display a highcharts graph in Vue.js?

0
votes

I am trying to display a parliament (item) chart with highcharts, using the basic example in their site.

In it, the very first configuration item says:

chart: {
      type: 'item'
},

And so this I use in my Vue.js project.

However, upon deploying I get an error in the console prompting to https://www.highcharts.com/errors/17/?missingModuleFor=item. There, the error message explains:

The requested series type does not exist

This error happens when setting chart.type or series.type to a series type that isn't defined in Highcharts. A typical reason may be that the module or extension where the series type is defined isn't included.

For example in order to create an arearange series, the highcharts-more.js file must be loaded.

For this, I assume I am not importing the chart. However, how can I find out which one to import?

1
javascriptvue.jshighcharts

1 Answers

0
votes

OK, so it was in the API reference:

series.item

An item series. If the type option is not specified, it is inherited from chart.type.

(...)

Requires

The hint of the module item-series helps us find the issue for Vue.js: it needs to import item from 'highcharts/modules/item-series'; and then register it:

import HighchartsVue from 'highcharts-vue';
import highchartsMore from 'highcharts/highcharts-more';
import item from 'highcharts/modules/item-series';

import Vue from "vue";


Vue.use(HighchartsVue);
item(Highcharts);

The same solution (with its corresponding module) should work for other graphs and you can find the list of all modules in https://code.highcharts.com/.