Syncfusion Feedback


Overview

The React scatter chart is used to plot data with two numeric parameters. Also referred to as a scatter plot or point chart, its rich feature set includes tooltip, multiple axes, zooming, and panning.


Multiple series scatter plot

Plot multiple scatter series in a single chart to compare different data sets. A legend and tooltip for the series can make it more readable.


Custom marker

Use different types of symbols to display the data points in a scatter plot. This will be useful in differentiating multiple series and points in the same chart.


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 a given angle.


Customization

Customize the look and feel of the scatter chart using built-in APIs.


React Scatter Chart Code Example

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

import {AxisModel,ChartComponent,Inject, ScatterSeries,SeriesCollectionDirective, SeriesDirective} from'@syncfusion/ej2-react-charts';
import * as React from 'react';
import { scatterData } from './scatter-data';
class App extends React.Component<{}, {}> {
  public primaryXAxis: AxisModel = { };
  public render() {
    return <ChartComponent id='charts' primaryXAxis={this.primaryXAxis}>
      <Inject services={[ScatterSeries]} />
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={scatterData.getMaleData} xName='x' yName='y' type='Scatter'/>
      </SeriesCollectionDirective>
    </ChartComponent>
  }
};
ReactDOM.render(
  <App />,
  document.getElementById('charts') as HTMLElement
);
<!DOCTYPE html>
<html>

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

</html>

Learning Resources

UG

Scatter Chart User Guide

Learn the available options to customize React scatter chart.

API

Scatter Chart API Reference

Explore the React scatter chart APIs.


90+ REACT UI COMPONENTS

Scroll up icon