Error for columnrange in typescript: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=columnrange - missingModuleFor: columnrange

Viewed 30

Hey: I m trying to use columnchart in typescript and I get this error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=columnrange - missingModuleFor: columnrange

I know I have to import some module, but I don't know exactly what and how to use it after that. this is my code:

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 is a project in typescript. Thank you!

1 Answers
Related