Scatter in EJ2 JavaScript Chart control

10 Jul 202311 minutes to read

Scatter Charts

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

var series1 = [];
var series2 = [];
var point1;
var value = 80;
var value1 = 70;
var i;
for (i = 1; i < 120; 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 < 120; 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);
}

var chart = new ej.charts.Chart({
    primaryXAxis: {
        title: 'Height (cm)',
        minimum: 120, maximum: 180,
        edgeLabelPlacement: 'Shift',
        labelFormat: '{value}cm'
    },
    primaryYAxis:
    {
        title: 'Weight (kg)',
        minimum: 60, maximum: 90,
        labelFormat: '{value}kg',
        rangePadding: 'None'
    },
    series: [
        {
            //Series type as scatter
            type: 'Scatter',
            dataSource: series1, xName: 'x', yName: 'y',
            name: 'Male', opacity : 0.7,
            marker: { width: 10, height: 10 }
        }, {
            type: 'Scatter',
            dataSource: series2, xName: 'x', yName: 'y',
            name: 'Female', opacity : 0.7,
            marker: { width: 10, height: 10 }
        }
    ],
    title: 'Height Vs Weight'
}, '#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://cdn.syncfusion.com/ej2/23.1.36/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</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.
var series1 = [];
var series2 = [];
var point1;
var value = 80;
var value1 = 70;
var i;
for (i = 1; i < 120; 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 < 120; 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);
}

var chart = new ej.charts.Chart(
  {
    primaryXAxis: {
      title: 'Height (cm)',
      minimum: 120,
      maximum: 180,
      edgeLabelPlacement: 'Shift',
      labelFormat: '{value}cm',
    },
    primaryYAxis: {
      title: 'Weight (kg)',
      minimum: 60,
      maximum: 90,
      labelFormat: '{value}kg',
      rangePadding: 'None',
    },
    series: [
      {
        //Series type as scatter
        type: 'Scatter',
        dataSource: series1,
        xName: 'x',
        yName: 'y',
        name: 'Male',
        opacity: 0.7,
        marker: { width: 5, height: 5, shape: 'Triangle' },
      },
      {
        type: 'Scatter',
        dataSource: series2,
        xName: 'x',
        yName: 'y',
        name: 'Female',
        opacity: 0.7,
        fill: 'red',
        marker: { width: 3, height: 3, shape: 'Square' },
      },
    ],
    title: 'Height Vs Weight',
  },
  '#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://cdn.syncfusion.com/ej2/23.1.36/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

See Also