How Do you convert JQuery HighChart to React - reactjs

Question

Here is a full link to the project: Electoral Map
I have this Highchart map that I'm trying to convert to React but can't quite figure it out. I tried using React rappers but didn't succeed.
What I have:
JSON data - will be fetched from an API but I have hard-coded them as below.
Jquery functions that maps the data.
Several highcharts imports.
I have not included the path data, too long it wouldnt post.
$(function() {
var json = [{
"name": "Busia",
"registered": "251305",
"UDA": "0",
"Azimio": "0",
"value": "-5"
},{
"name": "Wajir",
"registered": "118091",
"UDA": "8",
"Azimio": "7",
"value": "-2"
}]
function init() {
function pointClick(json) {
var row = this.options.row,
$div = $('<div></div>')
.dialog({
title: ([this.name]),
width: 400,
height: 300
});
window.chart = new Highcharts.Chart({
chart: {
renderTo: $div[0],
type: 'pie',
width: 370,
height: 240
},
title: {
text: null
},
series: [{
name: 'Votes',
data: [{
name: 'Azimio',
color: '#0200D0',
y: Number(this.Azimio)
}, {
name: 'UDA',
color: '#C40401',
y: Number(this.UDA)
}],
dataLabels: {
format: '<b>{point.name}</b> {point.value:.1f}%'
}
}]
});
}
// Initiate the chart
$('#presidential').highcharts('Map', {
title: {
text: 'Presidential Electoral Map <em>(Kenya)</em>'
},
legend: {
title: {
text: 'Political Affiliation'
}
},
credits: {
enabled: false
},
tooltip: {
valueSuffix: 'Margin'
},
mapNavigation: {
enabled: true,
enableButtons: false
},
colorAxis: {
dataClasses: [{
from: 0.0000001,
to: 100,
color: '#C40401',
name: 'UDA'
}, {
from: -100,
to: -0.00000001,
color: '#0200D0',
name: 'Azimio'
}, {
from: 0,
to: 0,
color: '#C0C0C0',
name: 'Battle Ground(s)'
}]
},
series: [{
name: 'By County Difference',
point: {
events: {
click: pointClick
}
},
"type": "map",
"joinBy": ['name', 'name'],
"data": $.each(json, function() {}),
"mapData": [{
"name": "Busia",
"path": "M40,-534,43,-533,46,-532L46,-530L44,-528,44,-525C44,-525,41,-520,41,-520L40,-516,40,-513,41,-511C41,-511,44,-512,43,-509,43,-506,44,-504,44,-504L38,-499,38,-497,44,-495,45,-493,41,-489,41,-486L36,-486L34,-487,30,-488,28,-487,25,-484,22,-484,20,-486,18,-483,16,-481,15,-478,14,-476L14,-473L15,-471,14,-469L12,-469L10,-467,9,-464,10,-459C10,-459,9,-458,7,-457,5,-456,5,-455,5,-455L3,-459,0,-462,0,-465,2,-470,2,-474L2,-478L5,-481,8,-486,10,-491,13,-493L13,-495L12,-499,13,-503,15,-506,15,-510,16,-513C16,-513,19,-516,20,-517,21,-517,24,-519,24,-519L27,-519,28,-519,31,-520L31,-524L32,-526,33,-527,34,-531,35,-532z"
},
}]
}, {
"type": "mapline",
"data": [{
"name": "path5072",
"path": "M443,-449Z"
}]
}]
});
}
init()
});

Answer 1

I've reproduced your example in the working demo that you can find below.
What's important, I didn't use the dialog popup which is a specific jQuery method. Instead, I show a pie chart inside the tooltip, with the use of several point.events such like mouseOver, mouseOut and click as well.
point: {
events: {
//Show the default tooltip
mouseOver: function () {
let point = this;
this.series.chart.update({
tooltip: {
enabled: true,
formatter: function () {
let s = "";
s += `<span style="color:${point.color}">●</span> <span style="font-size: 10px"> ${point.series.name}</span><br/>`;
s += `${point.name}: ${point.value}<br/>`;
return s;
}
}
});
},
//Show the pie chart
click: function () {
let y1 = Number(this.Azimio);
let y2 = Number(this.UDA);
this.series.chart.update({
tooltip: {
useHTML: true,
enabled: true,
formatter: function () {
setTimeout(function () {
Highcharts.chart("chart", {
chart: {
type: "pie"
},
title: {
text: null
},
series: [
{
name: "Votes",
data: [
{
name: "Azimio",
color: "#0200D0",
y: y1
},
{
name: "UDA",
color: "#C40401",
y: y2
}
],
dataLabels: {
format: "<b>{point.name}</b> {point.value:.1f}%"
}
}
]
});
}, 10);
return '<div id="chart" style="width: 300px; height: 150px;"></div>';
}
}
});
},
//Remove the tooltip
mouseOut: function () {
this.series.chart.update({
tooltip: {
enabled: false
}
});
}
}
},
API REference:
https://api.highcharts.com/highmaps/series.map.point.events
Demo:
https://codesandbox.io/s/highcharts-react-demo-forked-44tmqt