Customize scatter chart in Angular Chart component
27 Apr 202417 minutes to read
By using the shape property in the marker, you can customize the shape of the scatter series points like Circle, Rectangle, Triangle, Diamond, Cross, HorizontalLine, VerticalLine, Pentagon, InvertedTriangle and Image.
You can customize the width and height of the shapes by using width and height properties of the marker.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-angular-charts'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { PageService } from '@syncfusion/ej2-angular-grids'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { DialogModule } from '@syncfusion/ej2-angular-popups'
import { PieSeriesService, AccumulationTooltipService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import {
LineSeriesService, DateTimeService, DataLabelService, StackingColumnSeriesService, CategoryService,
StepAreaSeriesService, SplineSeriesService, ScrollBarService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
SelectionService, ScatterSeriesService, ZoomService, ColumnSeriesService, AreaSeriesService, RangeAreaSeriesService
} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
ChartModule, ChartAllModule, AccumulationChartAllModule, AccumulationChartModule, GridModule, DialogModule
],
providers: [LineSeriesService, DateTimeService, ColumnSeriesService, DataLabelService, ZoomService, StackingColumnSeriesService, CategoryService,
StepAreaSeriesService, SplineSeriesService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
PieSeriesService, AccumulationTooltipService, ScrollBarService, AccumulationDataLabelService, SelectionService, ScatterSeriesService,
PageService, AreaSeriesService, RangeAreaSeriesService ],
standalone: true,
selector: 'app-container',
template: `
<ejs-chart style='display:block;' [chartArea]='chartArea' align='center' id='chartcontainer' [title]='title'
[primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'>
<e-series-collection>
<e-series [dataSource]='series1' type='Scatter' xName='x' yName='y' opacity='0.6' name='Male' width=2 [marker]='marker1'>
</e-series>
<e-series [dataSource]='series2' type='Scatter' xName='x' yName='y' opacity='0.6' name='Female' width=2 [marker]='marker2'>
</e-series>
</e-series-collection>
</ejs-chart>
`
})
export class AppComponent {
public chartArea: Object = {
border: {
width: 0
}
};
//Initializing Primary X Axis
public primaryXAxis: Object = {
minimum: 100,
maximum: 220,
majorGridLines: { width: 0 },
edgeLabelPlacement: 'Shift',
title: 'Height in Inches'
};
//Initializing Primary Y Axis
public primaryYAxis: Object = {
majorTickLines: {
width: 0
},
lineStyle: {
width: 0
},
minimum: 0,
maximum: 100,
interval: 10,
title: 'Weight in Pounds',
rangePadding: 'None'
};
public marker1: Object = {
visible: false,
width: 28,
height: 20,
shape: 'Rectangle',
dataLabel: {visible: true, position: 'Inner' }
};
public marker2: Object = {
visible: false,
width: 12,
height: 12,
shape: 'Diamond'
};
public title: string = 'Height vs Weight';
public series1: Object[] = [
{ 'x': 131, 'y': 32, text: '131%' }, { 'x': 140, 'y': 52, text: '140%' }, { 'x': 149, 'y': 82, text: '149%' }, { 'x': 115, 'y': 52, text: '115%' },
{ 'x': 134, 'y': 62, text: '134%' }, { 'x': 183, 'y': 12, text: '183%' }, { 'x': 155, 'y': 32, text: '155%' }, { 'x': 164, 'y': 22, text: '164%' }];
public series2: Object[] = [
{ 'x': 115, 'y': 67, text: '115%' },
{ 'x': 138, 'y': 87, text: '138%' },
{ 'x': 166, 'y': 37, text: '166%' },
{ 'x': 122, 'y': 27, text: '122%' },
{ 'x': 126, 'y': 47, text: '126%' },
{ 'x': 119, 'y': 18, text: '119%' },
{ 'x': 141, 'y': 88, text: '141%' },
{ 'x': 180, 'y': 78, text: '180%' }
];
constructor() {
//code
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Customizing point color and data label value
You can customize the point color by using pointRender event in the chart. In which we have check the condition based on yValue to change the fill color of the point.
By default datalabel values shows y values of the datasource. You can customize the datalabel value by using textRender event in the chart.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-angular-charts'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { PageService } from '@syncfusion/ej2-angular-grids'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { DialogModule } from '@syncfusion/ej2-angular-popups'
import { PieSeriesService, AccumulationTooltipService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import {
LineSeriesService, DateTimeService, DataLabelService, StackingColumnSeriesService, CategoryService,
StepAreaSeriesService, SplineSeriesService, ScrollBarService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
SelectionService, ScatterSeriesService, ZoomService, ColumnSeriesService, AreaSeriesService, RangeAreaSeriesService
} from '@syncfusion/ej2-angular-charts'
import { Component } from '@angular/core';
import { ITextRenderEventArgs, IPointRenderEventArgs } from '@syncfusion/ej2-angular-charts';
@Component({
imports: [
ChartModule, ChartAllModule, AccumulationChartAllModule, AccumulationChartModule, GridModule, DialogModule
],
providers: [LineSeriesService, DateTimeService, ColumnSeriesService, DataLabelService, ZoomService, StackingColumnSeriesService, CategoryService,
StepAreaSeriesService, SplineSeriesService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
PieSeriesService, AccumulationTooltipService, ScrollBarService, AccumulationDataLabelService, SelectionService, ScatterSeriesService,
PageService, AreaSeriesService, RangeAreaSeriesService ],
standalone: true,
selector: 'app-container',
template: `
<ejs-chart style='display:block;' [chartArea]='chartArea' align='center' id='chartcontainer' [title]='title'
[primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' (textRender)='textRender($event)'
(pointRender)='pointRender($event)' [tooltip]='tooltip' >
<e-series-collection>
<e-series [dataSource]='series1' type='Scatter' xName='x' yName='y' opacity='0.6' name='Male' width=2 [marker]='marker1'>
</e-series>
<e-series [dataSource]='series2' type='Scatter' xName='x' yName='y' opacity='0.6' name='Female' width=2 [marker]='marker2'>
</e-series>
</e-series-collection>
</ejs-chart>
`
})
export class AppComponent {
public chartArea: Object = {
border: {
width: 0
}
};
//Initializing Primary X Axis
public primaryXAxis: Object = {
minimum: 100,
maximum: 220,
majorGridLines: { width: 0 },
edgeLabelPlacement: 'Shift',
title: 'Height in Inches'
};
//Initializing Primary Y Axis
public primaryYAxis: Object = {
majorTickLines: {
width: 0
},
lineStyle: {
width: 0
},
minimum: 0,
maximum: 100,
interval: 10,
title: 'Weight in Pounds',
rangePadding: 'None'
};
public marker1: Object = {
visible: false,
width: 28,
height: 20,
shape: 'Rectangle',
dataLabel: {visible: true, position: 'Inner', name: 'text'}
};
public marker2: Object = {
visible: false,
width: 12,
height: 12,
shape: 'Diamond'
};
public tooltip: Object = {
enable: true,
format: 'Weight: <b>${point.x} lbs</b> <br/> Height: <b>${point.y}"</b>'
};
public textRender(args: ITextRenderEventArgs): void {
args.text = args.point.x + '';
};
public pointRender(args: IPointRenderEventArgs | any): void {
if (args.point.y > 80) {
args.fill='red'
} else if(args.point.y < 40) {
args.fill='green'
}
};
public title: string = 'Height vs Weight';
public series1: Object[] = [
{ 'x': 131, 'y': 32, text: '131%' }, { 'x': 140, 'y': 52, text: '140%' }, { 'x': 149, 'y': 82, text: '149%' }, { 'x': 115, 'y': 52, text: '115%' },
{ 'x': 134, 'y': 62, text: '134%' }, { 'x': 183, 'y': 12, text: '183%' }, { 'x': 155, 'y': 32, text: '155%' }, { 'x': 164, 'y': 22, text: '164%' }];
public series2: Object[] = [
{ 'x': 115, 'y': 67, text: '115%' },
{ 'x': 138, 'y': 87, text: '138%' },
{ 'x': 166, 'y': 37, text: '166%' },
{ 'x': 122, 'y': 27, text: '122%' },
{ 'x': 126, 'y': 47, text: '126%' },
{ 'x': 119, 'y': 18, text: '119%' },
{ 'x': 141, 'y': 88, text: '141%' },
{ 'x': 180, 'y': 78, text: '180%' }
];
constructor() {
//code
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));