Angular Scatter Chart & Graph | Angular Charts

Overview

The Angular 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.

Multiple series scatter plot

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.

Custom marker

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 label

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.

Customization

Customize the look and feel of the scatter chart using built-in APIs.

Angular Scatter Chart Code Example

Easily get started with Angular Scatter using a few simple lines of JS code, as demonstrated below. Also explore our Angular Scatter Chart Example that shows you how to render and configure the scatter chart component.

html
ts
<ejs-chart style='display:block' id='chartcontainer'  [primaryXAxis]='primaryXAxis'>
<e-series-collection>
    <e-series [dataSource]='data' type='Scatter' xName='x' yName='y'> </e-series>    
</e-series-collection>
</ejs-chart>
//app.component.ts

import { Component } from '@angular/core';
export class AppComponent {
  public data: Object[] = [{ x: 'WW', y: 38.3, text: 'World Wide' },
  { x: 'EU', y: 45.2, text: 'Europe' },
  { x: 'APAC', y: 18.2, text: 'Asia Pacific' },
  { x: 'LATAM', y: 46.7, text: 'Latin America' },
  { x: 'MEA', y: 61.5, text: 'Middle East Africa' },
  { x: 'NA', y: 64, text: 'North America' }];
 
//Initializing Primary X Axis
public primaryXAxis: Object = {
    valueType: 'Category',
     
};
}

//app.module.ts
 
import { ChartModule } from '@syncfusion/ej2-ng-charts';
import { ScatterSeriesService, CategoryService} from '@syncfusion/ej2-ng-charts';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, ChartModule
  ],
  providers: [ ScatterSeriesService, CategoryService],
  bootstrap: [AppComponent]
})
export class AppModule { }