How To Add Variable-pie Chart To React Project?

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. A

Solution 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

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

variablePie(Highcharts);

classAppextendsReact.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<divclassName="chart-toggle-display"id="pie-chart-profile" />;
  }
}

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

Solution 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 (
        <divclassName="chart-toggle-display"id="pie-chart-profile"style={style}
        />
    )
}