CODEWITHSUNDEEP
highchartsreact-highcharts
Perfect Decoy
Perfect Decoy

Reputation: 1

Highcharts polar outcome is line instead of polar

I am trying to use highcharts polar with react. I tried creating straight line graphs and pie charts easily. However, based on Highcharts API, instead of chart:{type: pie} , i need to input chart:{polar: true}.

I edited straight on App.js after npx-create-react myapp, and the following steps which i don't think i need to state.

Here is my full code:

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

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]
    }
  ]
};

const App = () => (
  <div>
    <HighchartsReact
      Highcharts={Highcharts}
      Highcharts={Highcharts}
      options={options}
    />
  </div>
);

export default App;

This will just output a cartesian graph with columns, triangles, and lines, instead of a Polar chart.

Help thanks!

Upvotes: 0

Views: 556

Answers (1)

Vickey
Vickey

Reputation: 373

Original post

try to import the dependency like this 

import ReactHighchart from 'react-highcharts';
import HighchartMore from 'highcharts/highcharts-more';
HighchartMore(ReactHighchart.Highcharts);

also please refer this one about the bug present in the latest highcharts release.

Upvotes: 2

Related Questions