Syncfusion Feedback


Angular Charts Scatter Chart

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.

  1. <ejs-chart style='display:block' id='chartcontainer'  [primaryXAxis]='primaryXAxis'>
  2. <e-series-collection>
  3.     <e-series [dataSource]='data' type='Scatter' xName='x' yName='y'> </e-series>    
  4. </e-series-collection>
  5. </ejs-chart>
  1. //app.component.ts
  2.  
  3. import { Component } from '@angular/core';
  4. export class AppComponent {
  5.   public data: Object[] = [{ x: 'WW', y: 38.3, text: 'World Wide' },
  6.   { x: 'EU', y: 45.2, text: 'Europe' },
  7.   { x: 'APAC', y: 18.2, text: 'Asia Pacific' },
  8.   { x: 'LATAM', y: 46.7, text: 'Latin America' },
  9.   { x: 'MEA', y: 61.5, text: 'Middle East Africa' },
  10.   { x: 'NA', y: 64, text: 'North America' }];
  11.  
  12. //Initializing Primary X Axis
  13. public primaryXAxis: Object = {
  14.     valueType: 'Category',
  15.      
  16. };
  17. }
  18.  
  19. //app.module.ts
  20.  
  21. import { ChartModule } from '@syncfusion/ej2-ng-charts';
  22. import { ScatterSeriesService, CategoryService} from '@syncfusion/ej2-ng-charts';
  23. import { AppComponent } from './app.component';
  24.  
  25. @NgModule({
  26.   declarations: [
  27.     AppComponent
  28.   ],
  29.   imports: [
  30.     BrowserModule, ChartModule
  31.   ],
  32.   providers: [ ScatterSeriesService, CategoryService],
  33.   bootstrap: [AppComponent]
  34. })
  35. export class AppModule { }

Learning Resources

UG

Scatter Chart User Guide

Learn the available options to customize Angular Scatter Chart.

API

Scatter Chart API Reference

Explore the Angular Scatter Chart APIs.

90+ ANGULAR UI COMPONENTS

Scroll up icon
Chat with us