How to add variable-pie chart to react project?

Question

This is my code.How to render highcharts in react page. Included highcharts.js & variable-pie.js files. Is this code right ?? Once we load the chart, we didn't get any error. And we are only using two highchart library only. without using any other highchart react packages. Is this code is enough to display or render highcharts for reactjs?

 componentDidMount() {
            const options = this.highchartsOptions();
            this.chart = Highcharts.chart('pie-chart-profile', options);
        }
    highchartsOptions() {
            const options = {
                chart: {
                    // renderTo: 'container',
                    type: 'variablepie',
                    margin: [0, 0, 0, 0],
                    // marginLeft: -100,
                    events: {
                        load: function() {
                            this.renderer
                                .circle(
                                    this.chartWidth / 2,
                                    this.plotHeight / 2 + this.plotTop,
                                    this.plotHeight / 4,
                                )
                                .attr({
                                    fill: 'rgba(0,0,0,0)',
                                    stroke: '#2ec277',
                                    left: -100,
                                    'stroke-width': 1,
                                })
                                .add();
                        },
                    },
                },
                colors: ['#2ec277', '#2db799', '#b7e886', '#6d5494', '#0077b4'],

                title: {
                    text: null,
                },

                legend: {
                    align: 'right',
                    verticalAlign: 'top',
                    layout: 'vertical',
                    x: 20,
                    y: 100,
                    itemMarginTop: 5,
                    itemMarginBottom: 5,
                    itemStyle: {
                        font: '17pt Trebuchet MS, Verdana, sans-serif',
                        color: '#333333',
                    },
                },
                plotOptions: {
                    series: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: false,
                        },
                        showInLegend: true,
                        size: 185,
                    },
                },

                series: [
                    {
                        minPointSize: 10,
                        innerSize: '27%',
                        zMin: 0,
                        name: 'Job Match',
                        data: [
                            {
                                name: 'Job Title Match  99%',
                                y: 100,
                                z: 99,
                            },
                            {
                                name: 'Industry Match 98%',
                                y: 100,
                                z: 98,
                            },
                        ],
                    },
                ],
            };
            return options;
        }


    return (
    <div
                                        className="chart-toggle-display"
                                        id="pie-chart-profile"
                                        style={style}
                                    />
    )

Answer 1

I recommend you to use highcharts-react-official wrapper: https://github.com/highcharts/highcharts-react#readme

It will allow you to simply use Highcharts with React. Example: https://codesandbox.io/s/ovx6kqokqq

However, here you can find a working example without the wrapper: https://codesandbox.io/s/v6rrn7n745

import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import variablePie from "highcharts/modules/variable-pie.js";

variablePie(Highcharts);

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const options = this.highchartsOptions();
    this.chart = Highcharts.chart("pie-chart-profile", options);
  }
  highchartsOptions() {
    const options = {
      chart: {
        // renderTo: 'container',
        type: "variablepie",
        margin: [0, 0, 0, 0],
        // marginLeft: -100,
        events: {
          load: function() {
            this.renderer
              .circle(
                this.chartWidth / 2,
                this.plotHeight / 2 + this.plotTop,
                this.plotHeight / 4
              )
              .attr({
                fill: "rgba(0,0,0,0)",
                stroke: "#2ec277",
                left: -100,
                "stroke-width": 1
              })
              .add();
          }
        }
      },
      colors: ["#2ec277", "#2db799", "#b7e886", "#6d5494", "#0077b4"],

      title: {
        text: null
      },

      legend: {
        align: "right",
        verticalAlign: "top",
        layout: "vertical",
        x: 20,
        y: 100,
        itemMarginTop: 5,
        itemMarginBottom: 5,
        itemStyle: {
          font: "17pt Trebuchet MS, Verdana, sans-serif",
          color: "#333333"
        }
      },
      plotOptions: {
        series: {
          stacking: "normal",
          dataLabels: {
            enabled: false
          },
          showInLegend: true,
          size: 185
        }
      },

      series: [
        {
          minPointSize: 10,
          innerSize: "27%",
          zMin: 0,
          name: "Job Match",
          data: [
            {
              name: "Job Title Match  99%",
              y: 100,
              z: 99
            },
            {
              name: "Industry Match 98%",
              y: 100,
              z: 98
            }
          ]
        }
      ]
    };
    return options;
  }

  render() {
    return <div className="chart-toggle-display" id="pie-chart-profile" />;
  }
}

render(<App />, document.getElementById("root"));

Answer 2

I believe #pie-chart-profile should already be there in render() i.e the last return inside render()

componentDidMount() {
    const options = this.highchartsOptions();
    this.chart = Highcharts.chart('pie-chart-profile', options);
}
highchartsOptions() {
    const options = {
        chart: {
            // renderTo: 'container',
            type: 'variablepie',
            margin: [0, 0, 0, 0],
            // marginLeft: -100,
            events: {
                load: function() {
                    this.renderer
                        .circle(
                            this.chartWidth / 2,
                            this.plotHeight / 2 + this.plotTop,
                            this.plotHeight / 4,
                        )
                        .attr({
                            fill: 'rgba(0,0,0,0)',
                            stroke: '#2ec277',
                            left: -100,
                            'stroke-width': 1,
                        })
                        .add();
                },
            },
        },
        colors: ['#2ec277', '#2db799', '#b7e886', '#6d5494', '#0077b4'],

        title: {
            text: null,
        },

        legend: {
            align: 'right',
            verticalAlign: 'top',
            layout: 'vertical',
            x: 20,
            y: 100,
            itemMarginTop: 5,
            itemMarginBottom: 5,
            itemStyle: {
                font: '17pt Trebuchet MS, Verdana, sans-serif',
                color: '#333333',
            },
        },
        plotOptions: {
            series: {
                stacking: 'normal',
                dataLabels: {
                    enabled: false,
                },
                showInLegend: true,
                size: 185,
            },
        },

        series: [
            {
                minPointSize: 10,
                innerSize: '27%',
                zMin: 0,
                name: 'Job Match',
                data: [
                    {
                        name: 'Job Title Match  99%',
                        y: 100,
                        z: 99,
                    },
                    {
                        name: 'Industry Match 98%',
                        y: 100,
                        z: 98,
                    },
                ],
            },
        ],
    };
    return options;
}

render() {
    return (
        <div
            className="chart-toggle-display"
            id="pie-chart-profile"
            style={style}
        />
    )
}