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>
