Overview
The React Scatter Chart plots data using two numeric variables to visualize relationships and distributions between data points. Multiple series, custom markers, data labels, and tooltips support detailed analysis and comparison.
Multiple series scatter plot
Plot multiple scatter series in a single chart to compare different datasets. Legends and tooltips help distinguish series and improve readability.
Custom marker
Display data points using different marker shapes and symbols. Custom markers help distinguish multiple series and individual data points within the chart.
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.
Customization
Customize the look and feel of the scatter chart using built-in APIs.
React Scatter Chart Code Example
Get started with React Scatter using the HTML and JavaScript code below. Also explore the demo to learn how to render and configure the component.
import {AxisModel,ChartComponent,Inject, ScatterSeries,SeriesCollectionDirective, SeriesDirective} from'@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
class App extends React.Component<{}, {}> {
public primaryXAxis: AxisModel = { };
public data: any[] = [
{ x: 161, y: 51 },
{ x: 165, y: 58 },
{ x: 170, y: 63 },
{ x: 175, y: 68 },
{ x: 180, y: 75 }
];
public render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryXAxis}>
<Inject services={[ScatterSeries]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={this.data} 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
Explore all Syncfusion React components
Explore over 140+ React UI components featuring established, and production-ready controls built for modern web app development.
- SMART COMPONENTSDATA VISUALIZATIONDROPDOWNSFILE VIEWERS & EDITORSBUTTONSINTERACTIVE CHATINPUTSNAVIGATIONNOTIFICATIONS
