import React, { useRef } from 'react';
import * as Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HC_more from 'highcharts/highcharts-more';
HC_more(Highcharts);
const options: Highcharts.Options = {
chart: {
type: 'bubble',
plotBorderWidth: 1,
},
title: {
text: 'Simple Bubble Chart',
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'X Bubble Values'
}
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Y Bubble Values'
}
},
tooltip: {
pointFormat: 'x: {point.x}, y: {point.y}, z: {point.z}',
},
series: [
{
name: 'Blue bubbles',
data: [
[9, 81, 63],
[98, 5, 89],
[51, 50, 73],
[41, 22, 14],
[58, 24, 20],
[78, 37, 34],
[55, 56, 53],
[18, 45, 70],
[42, 44, 28],
[3, 52, 59],
[31, 18, 97],
[79, 91, 63],
[93, 23, 23],
[44, 83, 22]
]
},
{
name: 'Blue bubbles',
data: [
[42, 38, 20],
[6, 18, 1],
[1, 93, 55],
[57, 2, 90],
[80, 76, 22],
[11, 74, 96],
[88, 56, 10],
[30, 47, 49],
[57, 62, 98],
[4, 16, 16],
[46, 10, 11],
[22, 87, 89],
[57, 91, 82],
[45, 15, 98]
],
},
],
};
const App = (props: HighchartsReact.Props) => {
const chartComponentRef = useRef<HighchartsReact.RefObject(null);
return (
<HighchartsReact
highcharts={Highcharts}
options={options}
ref={chartComponentRef}
{...props}
/>
);
};
export default App;