Overview

The React Bubble Chart visualizes data in three dimensions, similar to a scatter chart. Bubble size is determined based on the third parameter.

Customizing each bubble

Appearance of each data point in a Bubble Chart can be customized using point render event to differentiate each point based on the size.

Data label

Data labels display information about data points. Templates support custom label content using HTML elements such as images, divs, and spans. Labels can also be rotated to a specified angle.

React Bubble Chart code example

Get started with React Bubble Chart using a few simple lines of HTML and JavaScript code example as demonstrated below. Also explore demo to learn how to render and configure the component.

html
js

<!DOCTYPE html>
<html>

<body> 
     <div id="charts"></div>
</body>

</html>

import {AxisModel, BubbleSeries, ChartComponent, Inject, SeriesCollectionDirective, SeriesDirective} from'@syncfusion/ej2-react-charts';
import * as React from 'react';
class App extends React.Component<{}, {}> {
  public primaryXAxis: AxisModel = { };
  public data1 : any[]= [
    { x: 1, y: 45, text: 'USA', fill: '#00226C', size: 1.347 },
    { x: 2, y: 20, text: 'AUS', fill: '#0450C2', size: 1 },
    { x: 3, y: 56, text: 'CHN', fill: '#0073DC', size: 0.01 },
    { x: 4, y: 30, text: 'IND', fill: '#0D98FF', size: 0.7 },
    { x: 5, y: 13, text: 'JPN', fill: '#9CD9FF', size: 0.333 },
    { x: 6, y: 45, text: 'UK', fill: '#0450C2', size: 1 }
];

  public render() {
    return <ChartComponent id='charts' primaryXAxis={this.primaryXAxis}>
      <Inject services={[BubbleSeries]} />
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={this.data1} xName='x' yName='y' size='size' type='Bubble'/>
      </SeriesCollectionDirective>
    </ChartComponent>
  }
};
ReactDOM.render(
  <App />,
  document.getElementById('charts') as HTMLElement
);