Hello there: I am currently working on implementing a column chart in TypeScript and keep encountering this error message: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=columnrange - missingModuleFor: columnrange
I understand that I need to import a certain module, but I'm unsure of which one specifically and how to utilize it properly. Here is the code snippet:
import Highcharts, { Options } from "highcharts";
import HighchartsReact from "highcharts-react-official";
import * as React from "react";
export const Example: React.FC = () => {
const chartOptions: Options = {
chart: {
type: 'columnrange',
width: 25,
height: 30,
backgroundColor: 'transparent',
ignoreHiddenSeries: true
},
title: {
text: ''
},
xAxis: [
{
visible: false,
minPadding: 0,
maxPadding: 0,
minorTickLength: 0,
tickLength: 0,
labels: {
enabled: false // disable labels
}
}
],
yAxis: [
{
visible: false,
minPadding: 0,
maxPadding: 0,
title: { text: null },
gridLineWidth: 0,
labels: {
enabled: false // disable labels
}
}
],
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
},
tooltip: {
enabled: false
},
legend: {
enabled: false
},
series: [
{
type: 'columnrange',
data: [
[10, 90],
[20, 50],
[5, 90],
[40, 120],
[20, 50],
[5, 90],
{ low: 40, high: 150, color: '#3f8eeb' }
],
dataLabels: { enabled: false },
/* states: {
hover: {
enabled: false
}},*/
groupPadding: 0.2,
color: '#79b1f1'
},
{
type: 'scatter',
data: [
// x, y positions where 0 is the first category
[0, 15],
[1, 43],
[2, 37],
[3, 45],
[4, 43],
[5, 37],
[6, 100]
],
marker: {
fillColor: 'white',
duration: false
//lineWidth: 0.2,
//lineColor: Highcharts.getOptions().colors[0]
// size: 0.3
}
}
],
navigation: {
buttonOptions: {
enabled: false
}
},
credits: {
enabled: false
}
};
return (
<>
<HighchartsReact highcharts={Highcharts} options={chartOptions} />
</>
);
};
This particular project is written in TypeScript. Appreciate your support!