2

enter image description hereI want to render the radar chart using react high charts, But after writing below code, i am getting the line chart format not exactly the expected output i am achieving, Which i am trying to get the chart in radar format.

  {
                
            chart: {
                renderTo: 'container',
                polar: true,
                type: 'line'
            },
            credits: {
                enabled: false
            },
            
            title: {
                text: '',
               
            },
            xAxis: {
                categories: ['Sales', 'Marketing', 'Development', 'Customer Support', 
                        'Information Technology', 'Administration'],
            },
                
            yAxis: {
                gridLineInterpolation: 'polygon',
                lineWidth: 0,
                min: 0
            },
            series: [{
                name: 'Allocated Budget',
                data: [43000, 19000, 60000, 35000, 17000, 10000],
                pointPlacement: 'on'
            }, {
                name: 'Actual Spending',
                data: [50000, 39000, 42000, 31000, 26000, 14000],
                pointPlacement: 'on'
            }]
        
        }

Component

<ReactHighcharts config={radar}></ReactHighcharts>

Import

import ReactHighcharts from 'react-highcharts';

I am unable to render in radar type, Instead getting similar to line chart I am unable to render in radar type, Instead getting similar to line chart

enter image description here

mantena varma
  • 51
  • 6

2 Answers2

0

import HighchartsMore dependency like below.

import ReactHighcharts from "react-highcharts";    
import HighchartsMore from "highcharts/highcharts-more";
HighchartsMore(ReactHighcharts.Highcharts);

HighchartsMore added some extra features on top of Highcharts without modifying it's core logic. Including this file, also allows us to use some types of charts that don't exist in the "original" highcharts such as range, bubble, polar charts, etc.

Working code - https://codesandbox.io/s/frosty-snow-prkfs?file=/src/App.js

Sarun UK
  • 6,210
  • 7
  • 23
  • 48
0

Remember to include the necessary modules:

import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import HC_more from "highcharts/highcharts-more";

// init the module
HC_more(Highcharts);

Here you will find a working demo: https://stackblitz.com/edit/react-hujz1u?file=index.js

madepiet
  • 859
  • 1
  • 5
  • 7
  • 1
    I am trying to replace the same, facing the below error "Cannot read property 'Core/Chart/Chart.js' of undefined" – mantena varma Jun 21 '21 at 08:50
  • @mantenavarma Could you also show what your import looks like? – madepiet Jun 21 '21 at 09:15
  • import ReactHighcharts from 'react-highcharts'; import HighchartsMore from "highcharts/highcharts-more"; HighchartsMore(ReactHighcharts.Highcharts); – mantena varma Jun 21 '21 at 09:23
  • The import statements which u have shared after i applied those i am getting empty not even chart is rendering so i am keeping above import statements – mantena varma Jun 21 '21 at 09:24