This demo shows how to use the Highcharts React integration to create a simple bubble chart. The demo and code are purely decorative.
| 1 | import React from 'react'; |
| 2 | import { createRoot } from 'react-dom/client'; |
| 3 | import { Chart, Title } from '@highcharts/react'; |
| 4 | import { Accessibility } from '@highcharts/react/options/Accessibility'; |
| 5 | import { BubbleSeries } from '@highcharts/react/series/Bubble'; |
| 6 | |
| 7 | export default function ChartComponent() { |
| 8 | const series1 = [ |
| 9 | [9, 81, 63], [98, 5, 89], [51, 50, 73], [41, 22, 14], |
| 10 | [58, 24, 20], [78, 37, 34], [55, 56, 53], [18, 45, 70], |
| 11 | [42, 44, 28], [3, 52, 59], [31, 18, 97], [79, 91, 63], |
| 12 | [93, 23, 23], [44, 83, 22] |
| 13 | ]; |
| 14 | |
| 15 | const series2 = [ |
| 16 | [42, 38, 20], [6, 18, 1], [1, 93, 55], [57, 2, 90], |
| 17 | [80, 76, 22], [11, 74, 96], [88, 56, 10], [30, 47, 49], |
| 18 | [57, 62, 98], [4, 16, 16], [46, 10, 11], [22, 87, 89], |
| 19 | [57, 91, 82], [45, 15, 98] |
| 20 | ]; |
| 21 | |
| 22 | return ( |
| 23 | <Chart> |
| 24 | <Title>Simple Bubble Chart</Title> |
| 25 | <Accessibility /> |
| 26 | <BubbleSeries data={series1} /> |
| 27 | <BubbleSeries data={series2} /> |
| 28 | </Chart> |
| 29 | ); |
| 30 | } |
| 31 | |
| 32 | createRoot(document.querySelector('#container')).render(<ChartComponent />); |