Search results

Customize scatter chart in Angular Chart component

24 Sep 2021 / 5 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.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
@Component({
    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[] = 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
     };
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule } 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';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, AccumulationChartModule, GridModule, DialogModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [LineSeriesService, DateTimeService, ColumnSeriesService, DataLabelService, ZoomService, StackingColumnSeriesService, CategoryService,
        StepAreaSeriesService, SplineSeriesService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
        PieSeriesService, AccumulationTooltipService, ScrollBarService, AccumulationDataLabelService, SelectionService, ScatterSeriesService,
        PageService, AreaSeriesService, RangeAreaSeriesService ]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { ILoadedEventArgs, ChartTheme, ITextRenderEventArgs, IPointRenderEventArgs } from '@syncfusion/ej2-angular-charts';
@Component({
    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): 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[] = 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
     };
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule } 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';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, AccumulationChartModule, GridModule, DialogModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [LineSeriesService, DateTimeService, ColumnSeriesService, DataLabelService, ZoomService, StackingColumnSeriesService, CategoryService,
        StepAreaSeriesService, SplineSeriesService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
        PieSeriesService, AccumulationTooltipService, ScrollBarService, AccumulationDataLabelService, SelectionService, ScatterSeriesService,
        PageService, AreaSeriesService, RangeAreaSeriesService ]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);