Scatter in JavaScript Chart control

08 May 2023 / 3 minutes to read

Scatter Charts

To render a scatter series, use series type as Scatter and inject ScatterSeries module using Chart.Inject(ScatterSeries) method.

Source

Preview

index.ts

index.html

import { Chart, ScatterSeries, Legend } from '@syncfusion/ej2-charts';
Chart.Inject(ScatterSeries, Legend);

let series1: Object[] = [];
let series2: Object[] = [];
let point1: Object;
let value: number = 80;
let value1: number = 70;
let i: number;
for (i = 1; i < 50; i++) {
    if (Math.random() > 0.5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    value = value < 60 ? 60 : value > 90 ? 90 : value;
    point1 = { x: 120 + (i / 2), y: value.toFixed(1) };
    series1.push(point1);
}
for (i = 1; i < 50; i++) {
    if (Math.random() > 0.5) {
        value1 += Math.random();
    } else {
        value1 -= Math.random();
    }
    value1 = value1 < 60 ? 60 : value1 > 90 ? 90 : value1;
    point1 = { x: 120 + (i / 2), y: value1.toFixed(1) };
    series2.push(point1);
}

let chart: Chart = new Chart({
   series: [
        {
            //Series type as scatter
            type: 'Scatter',
            dataSource: series1, xName: 'x', yName: 'y',

        }, {
            type: 'Scatter',
            dataSource: series2, xName: 'x', yName: 'y',
        }
    ],

}, '#element');

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Series customization

The following properties can be used to customize the scatter series.

fill – Specifies the color of the series.
opacity – Specifies the opacity of fill.
shape - Specifies the shape of the scatter series.