Overview

The React bubble chart is similar to a scatter plot but adds a third dimension by varying the size of each bubble based on a third numeric value, allowing users to visualize data in three dimensions.

Data labels

Data labels offer contextual information for each data point and can be rotated to a specified angle for better readability.

React bubble chart code example

Quickly get started with the React scatter chart using a few lines of TSX code, as shown below. You can also explore this React bubble chart example to learn how to render and customize the chart in a React application.

import { Chart, ChartPrimaryXAxis, ChartSeriesCollection, ChartSeries } from '@syncfusion/react-charts';

export default function App() {
    const data = [
      { x: 1, y: 45, size: 1.347 },
      { x: 2, y: 20, size: 1 },
      { x: 3, y: 56, size: 0.01 },
      { x: 4, y: 30, size: 0.7 },
      { x: 5, y: 13, size: 0.333 },
      { x: 6, y: 45, size: 1 },
    ];
    return (
        <Chart>
            <ChartPrimaryXAxis valueType='Double'>
            </ChartPrimaryXAxis>
            <ChartSeriesCollection>
              <ChartSeries dataSource={data} xField="x" yField="y" sizeField="size" type="Bubble" />
            </ChartSeriesCollection>
        </Chart>
    )
}