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}
/>
)