Overview

The React scatter chart, also known as a scatter plot or point chart, is used to visualize relationships between two numerical variables. It comes with a rich feature set including tooltips, multiple axes, zooming, and panning for enhanced interactivity.

Multiple series

Multiple scatter series can be plotted within a single chart to compare different datasets. Legends and tooltips improve readability and provide detailed insights into each series.

Symbol customization

Different marker symbols can be used to represent data points, helping distinguish between multiple series and individual points within the chart.

Data labels

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

Styling options

Customize the appearance of the scatter chart using built-in APIs to match your design and improve clarity.

React scatter 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 scatter chart example to learn how to render and customize the chart in a React application.

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

export default function App() {
    return (
        <Chart>
            <ChartPrimaryXAxis valueType='Double'>
            </ChartPrimaryXAxis>
            <ChartSeriesCollection>
              <ChartSeries dataSource={mendData} xField="x" yField="y" type="Scatter" />
            </ChartSeriesCollection>
        </Chart>
    )
}