i am unable to draw a Polar (Radar) chart

[AbinashPradhan1]

Hi Team,
I am unable to draw a Polar (Radar) chart.

import React from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const SpiderChart = () => {
  // Initialize Highcharts
  if (!Highcharts) {
    throw new Error("Highcharts not found");
  }

  const options = {
    chart: {
      polar: true,
    },

    title: {
      text: "Highcharts Polar Chart",
    },

    subtitle: {
      text: "Also known as Radar Chart",
    },

    pane: {
      startAngle: 0,
      endAngle: 360,
    },

    xAxis: {
      tickInterval: 45,
      min: 0,
      max: 360,
      labels: {
        format: "{value}°",
      },
    },

    yAxis: {
      min: 0,
    },

    plotOptions: {
      series: {
        pointStart: 0,
        pointInterval: 45,
      },
      column: {
        pointPadding: 0,
        groupPadding: 0,
      },
    },

    series: [
      {
        type: "column",
        name: "Column",
        data: [8, 7, 6, 5, 4, 3, 2, 1],
        pointPlacement: "between",
      },
      {
        type: "line",
        name: "Line",
        data: [1, 2, 3, 4, 5, 6, 7, 8],
      },
      {
        type: "area",
        name: "Area",
        data: [1, 8, 2, 7, 3, 6, 4, 5],
      },
    ],
  };


  return <HighchartsReact highcharts={Highcharts} options={options} />;
};

export default SpiderChart;

[AbinashPradhan1]

import React from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import HighchartsMore from "highcharts/highcharts-more"; //necessary for 'arearange' series type
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";
import Exporting from "highcharts/modules/exporting";


HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Exporting(Highcharts);

It worked after import use of above code

[Paweł Potaczek]

Hi @AbinashPradhan1,

According to the API, enabling polar option requires the highcharts-more module.
You need to import and initialize the module in React as below:

import React from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import HighchartsMore from "highcharts/highcharts-more";

HighchartsMore(Highcharts);

API Reference: https://api.highcharts.com/highcharts/chart.polar

Best regards!