React Scatter Chart
A scatter chart visualizes relationships between two continuous variables using dots, helping identify trends, correlations, and data distributions effectively.
Overview
To visualize data as a scatter chart, set the type property to Scatter within the ChartSeries component.
Data label
To display data labels on the scatter chart, set the visible property to true within the ChartDataLabel component.
Customizing point shape
To modify the shape of data points in the chart, use the shape property within the ChartMarker component.
-
This property allows you to choose from various predefined shapes such as
Circle,Diamond,Triangle,Rectangle, and more. -
Customizing the shape helps differentiate data series visually and enhances chart readability.
Customizing point size
To adjust the size of data points in a Scatter chart, use the height and width properties inside the ChartMarker component. This controls the visual dimensions of each data point.
Series customization
You can customize the appearance of the scatter series in the ChartSeries component by setting the following properties:
Dynamic update
We can dynamically replace the entire dataset in a Scatter chart when the underlying data changes significantly.
This approach is especially useful during:
- Periodic refreshes (e.g., hourly or daily updates)
- Batch processing of large datasets
- Recalculated analytics or simulations