The JavaScript 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.
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.
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 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.
Customize the look and feel of the scatter chart using built-in APIs.
Easily get started with JavaScript Scatter using a few simple lines of JS code, as demonstrated below. Also explore our JavaScript Scatter Chart Example that shows you how to render and configure the scatter chart component.
import { Chart, ScatterSeries } from '@syncfusion/ej2-charts';
import { scatterData } from '../scatter-data';
Chart.Inject(Chart, ScatterSeries);
let chart: Chart = new Chart({
series:[{
type: 'Scatter',
dataSource: scatterData.getMaleData,
xName: 'x',
yName: 'y',
},
],
}, '#Chart');<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="container">
<div id="Chart"></div>
</div>
</body>
</html>
