Syncfusion Feedback


Overview

React Bubble Chart is like a scatter chart, but allows you to visualize data in 3 dimensions. The size of the bubble is determined based on the third parameter.


Customizing each point in 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. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle.


React Bubble Chart Code Example

Easily get started with React Bubble Chart using a few simple lines of HTML and JS code example as demonstrated below. Also explore our React Bubble Chart Example that shows you how to render and configure the chart.

<!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' type='Bubble'/>
      </SeriesCollectionDirective>
    </ChartComponent>
  }
};
ReactDOM.render(
  <App />,
  document.getElementById('charts') as HTMLElement
);

Learning Resources

UG

Bubble Chart User Guide

Learn the available options to customize React Bubble Chart.

API

Bubble Chart API Reference

Explore the React bubble chart APIs.


90+ REACT UI COMPONENTS

Scroll up icon