HelpBot Assistant

How can I help you?

Area Chart in Angular Charts

3 Feb 202624 minutes to read

Area

Area charts are ideal for visualizing trends over time or across categories by displaying data as filled regions beneath connecting lines. They effectively show cumulative values and help compare multiple data series.

To render an area series in your chart:

  1. Set the series type: Define the series type as Area in your chart configuration.

  2. Inject the AreaSeries module: Use the @NgModule.providers method to inject the AreaSeriesService module into your chart to enable area series functionality.

import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, TooltipService, CategoryService, LegendService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { energyConsumptionData } from './datasource';

@Component({
    imports: [ChartModule, ChartAllModule],
    providers: [AreaSeriesService, CategoryService, LegendService, TooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [legendSettings]='legendSettings' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='oil' name='Oil'></e-series>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='coal' name='Coal'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    ngOnInit(): void {
        this.chartData = energyConsumptionData;
        this.primaryXAxis = {
            minimum: 2000, maximum: 2024,
            interval: 4, edgeLabelPlacement: 'Shift'
        };
        this.primaryYAxis = {
            title: 'Energy (TWh)',
            labelFormat: '{value} TWh'
        };
        this.title = 'Global primary energy consumption by source';
        this.legendSettings = { visible: true, enableHighlight: true };
        this.tooltip = { enable: true };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let energyConsumptionData: Object[] = [
    { year: 2000, oil: 43017, coal: 27456 },
    { year: 2001, oil: 43398, coal: 27880 },
    { year: 2002, oil: 43697, coal: 28982 },
    { year: 2003, oil: 44611, coal: 31520 },
    { year: 2004, oil: 46413, coal: 33709 },
    { year: 2005, oil: 47017, coal: 36201 },
    { year: 2006, oil: 47437, coal: 38087 },
    { year: 2007, oil: 48088, coal: 40242 },
    { year: 2008, oil: 47693, coal: 40797 },
    { year: 2009, oil: 46634, coal: 40219 },
    { year: 2010, oil: 48193, coal: 42016 },
    { year: 2011, oil: 48578, coal: 43983 },
    { year: 2012, oil: 49362, coal: 44099 },
    { year: 2013, oil: 49923, coal: 44745 },
    { year: 2014, oil: 50336, coal: 44912 },
    { year: 2015, oil: 51294, coal: 43695 },
    { year: 2016, oil: 52315, coal: 42768 },
    { year: 2017, oil: 53263, coal: 43226 },
    { year: 2018, oil: 53793, coal: 43897 },
    { year: 2019, oil: 53997, coal: 43628 },
    { year: 2020, oil: 49101, coal: 42316 },
    { year: 2021, oil: 51847, coal: 44642 },
    { year: 2022, oil: 53562, coal: 44927 },
    { year: 2023, oil: 54839, coal: 45319 },
    { year: 2024, oil: 55292, coal: 45851 }
];

Data binding for area series

Connect your data to the chart using the dataSource property within the series configuration. This property supports JSON datasets and remote data sources. Map the data fields to the chart series using xName and yName properties to ensure proper data visualization.

import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, TooltipService, CategoryService, LegendService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { energyConsumptionData } from './datasource';

@Component({
    imports: [ChartModule, ChartAllModule],
    providers: [AreaSeriesService, CategoryService, LegendService, TooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [legendSettings]='legendSettings' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='oil' name='Oil'></e-series>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='coal' name='Coal'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    ngOnInit(): void {
        this.chartData = energyConsumptionData;
        this.primaryXAxis = {
            minimum: 2000, maximum: 2024,
            interval: 4, edgeLabelPlacement: 'Shift'
        };
        this.primaryYAxis = {
            title: 'Energy (TWh)',
            labelFormat: '{value} TWh'
        };
        this.title = 'Global primary energy consumption by source';
        this.legendSettings = { visible: true, enableHighlight: true };
        this.tooltip = { enable: true };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let energyConsumptionData: Object[] = [
    { year: 2000, oil: 43017, coal: 27456 },
    { year: 2001, oil: 43398, coal: 27880 },
    { year: 2002, oil: 43697, coal: 28982 },
    { year: 2003, oil: 44611, coal: 31520 },
    { year: 2004, oil: 46413, coal: 33709 },
    { year: 2005, oil: 47017, coal: 36201 },
    { year: 2006, oil: 47437, coal: 38087 },
    { year: 2007, oil: 48088, coal: 40242 },
    { year: 2008, oil: 47693, coal: 40797 },
    { year: 2009, oil: 46634, coal: 40219 },
    { year: 2010, oil: 48193, coal: 42016 },
    { year: 2011, oil: 48578, coal: 43983 },
    { year: 2012, oil: 49362, coal: 44099 },
    { year: 2013, oil: 49923, coal: 44745 },
    { year: 2014, oil: 50336, coal: 44912 },
    { year: 2015, oil: 51294, coal: 43695 },
    { year: 2016, oil: 52315, coal: 42768 },
    { year: 2017, oil: 53263, coal: 43226 },
    { year: 2018, oil: 53793, coal: 43897 },
    { year: 2019, oil: 53997, coal: 43628 },
    { year: 2020, oil: 49101, coal: 42316 },
    { year: 2021, oil: 51847, coal: 44642 },
    { year: 2022, oil: 53562, coal: 44927 },
    { year: 2023, oil: 54839, coal: 45319 },
    { year: 2024, oil: 55292, coal: 45851 }
];

Series customization

Customize the appearance of area series using various styling properties to match your application’s design requirements.

Fill

Use the fill property to set the fill color for empty points.

import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, TooltipService, CategoryService, LegendService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { energyConsumptionData } from './datasource';

@Component({
    imports: [ChartModule, ChartAllModule],
    providers: [AreaSeriesService, CategoryService, LegendService, TooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [legendSettings]='legendSettings' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='oil' name='Oil' fill='#4A90A4'></e-series>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='coal' name='Coal' fill='#B8860B'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    ngOnInit(): void {
        this.chartData = energyConsumptionData;
        this.primaryXAxis = {
            minimum: 2000, maximum: 2024,
            interval: 4, edgeLabelPlacement: 'Shift'
        };
        this.primaryYAxis = {
            title: 'Energy (TWh)',
            labelFormat: '{value} TWh'
        };
        this.title = 'Global primary energy consumption by source';
        this.legendSettings = { visible: true, enableHighlight: true };
        this.tooltip = { enable: true };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let energyConsumptionData: Object[] = [
    { year: 2000, oil: 43017, coal: 27456 },
    { year: 2001, oil: 43398, coal: 27880 },
    { year: 2002, oil: 43697, coal: 28982 },
    { year: 2003, oil: 44611, coal: 31520 },
    { year: 2004, oil: 46413, coal: 33709 },
    { year: 2005, oil: 47017, coal: 36201 },
    { year: 2006, oil: 47437, coal: 38087 },
    { year: 2007, oil: 48088, coal: 40242 },
    { year: 2008, oil: 47693, coal: 40797 },
    { year: 2009, oil: 46634, coal: 40219 },
    { year: 2010, oil: 48193, coal: 42016 },
    { year: 2011, oil: 48578, coal: 43983 },
    { year: 2012, oil: 49362, coal: 44099 },
    { year: 2013, oil: 49923, coal: 44745 },
    { year: 2014, oil: 50336, coal: 44912 },
    { year: 2015, oil: 51294, coal: 43695 },
    { year: 2016, oil: 52315, coal: 42768 },
    { year: 2017, oil: 53263, coal: 43226 },
    { year: 2018, oil: 53793, coal: 43897 },
    { year: 2019, oil: 53997, coal: 43628 },
    { year: 2020, oil: 49101, coal: 42316 },
    { year: 2021, oil: 51847, coal: 44642 },
    { year: 2022, oil: 53562, coal: 44927 },
    { year: 2023, oil: 54839, coal: 45319 },
    { year: 2024, oil: 55292, coal: 45851 }
];

Gradient fill

Apply gradient colors to create visually appealing area series with smooth color transitions by configuring the fill property with gradient values.

import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, TooltipService, CategoryService, LegendService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { energyConsumptionData } from './datasource';

@Component({
    imports: [ChartModule, ChartAllModule],
    providers: [AreaSeriesService, CategoryService, LegendService, TooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [legendSettings]='legendSettings' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='oil' name='Oil' fill='url(#oilGradient)'></e-series>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='coal' name='Coal' fill='url(#coalGradient)'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    ngOnInit(): void {
        this.chartData = energyConsumptionData;
        this.primaryXAxis = {
            minimum: 2000, maximum: 2024,
            interval: 4, edgeLabelPlacement: 'Shift'
        };
        this.primaryYAxis = {
            title: 'Energy (TWh)',
            labelFormat: '{value} TWh'
        };
        this.title = 'Global primary energy consumption by source';
        this.legendSettings = { visible: true, enableHighlight: true };
        this.tooltip = { enable: true };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let energyConsumptionData: Object[] = [
    { year: 2000, oil: 43017, coal: 27456 },
    { year: 2001, oil: 43398, coal: 27880 },
    { year: 2002, oil: 43697, coal: 28982 },
    { year: 2003, oil: 44611, coal: 31520 },
    { year: 2004, oil: 46413, coal: 33709 },
    { year: 2005, oil: 47017, coal: 36201 },
    { year: 2006, oil: 47437, coal: 38087 },
    { year: 2007, oil: 48088, coal: 40242 },
    { year: 2008, oil: 47693, coal: 40797 },
    { year: 2009, oil: 46634, coal: 40219 },
    { year: 2010, oil: 48193, coal: 42016 },
    { year: 2011, oil: 48578, coal: 43983 },
    { year: 2012, oil: 49362, coal: 44099 },
    { year: 2013, oil: 49923, coal: 44745 },
    { year: 2014, oil: 50336, coal: 44912 },
    { year: 2015, oil: 51294, coal: 43695 },
    { year: 2016, oil: 52315, coal: 42768 },
    { year: 2017, oil: 53263, coal: 43226 },
    { year: 2018, oil: 53793, coal: 43897 },
    { year: 2019, oil: 53997, coal: 43628 },
    { year: 2020, oil: 49101, coal: 42316 },
    { year: 2021, oil: 51847, coal: 44642 },
    { year: 2022, oil: 53562, coal: 44927 },
    { year: 2023, oil: 54839, coal: 45319 },
    { year: 2024, oil: 55292, coal: 45851 }
];

Opacity

The opacity property controls the transparency of the fill and affects how the series blends with background or overlapping series.

import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, TooltipService, CategoryService, LegendService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { energyConsumptionData } from './datasource';

@Component({
    imports: [ChartModule, ChartAllModule],
    providers: [AreaSeriesService, CategoryService, LegendService, TooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [legendSettings]='legendSettings' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='oil' name='Oil' opacity=0.5></e-series>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='coal' name='Coal' opacity=0.7></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    ngOnInit(): void {
        this.chartData = energyConsumptionData;
        this.primaryXAxis = {
            minimum: 2000, maximum: 2024,
            interval: 4, edgeLabelPlacement: 'Shift'
        };
        this.primaryYAxis = {
            title: 'Energy (TWh)',
            labelFormat: '{value} TWh'
        };
        this.title = 'Global primary energy consumption by source';
        this.legendSettings = { visible: true, enableHighlight: true };
        this.tooltip = { enable: true };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let energyConsumptionData: Object[] = [
    { year: 2000, oil: 43017, coal: 27456 },
    { year: 2001, oil: 43398, coal: 27880 },
    { year: 2002, oil: 43697, coal: 28982 },
    { year: 2003, oil: 44611, coal: 31520 },
    { year: 2004, oil: 46413, coal: 33709 },
    { year: 2005, oil: 47017, coal: 36201 },
    { year: 2006, oil: 47437, coal: 38087 },
    { year: 2007, oil: 48088, coal: 40242 },
    { year: 2008, oil: 47693, coal: 40797 },
    { year: 2009, oil: 46634, coal: 40219 },
    { year: 2010, oil: 48193, coal: 42016 },
    { year: 2011, oil: 48578, coal: 43983 },
    { year: 2012, oil: 49362, coal: 44099 },
    { year: 2013, oil: 49923, coal: 44745 },
    { year: 2014, oil: 50336, coal: 44912 },
    { year: 2015, oil: 51294, coal: 43695 },
    { year: 2016, oil: 52315, coal: 42768 },
    { year: 2017, oil: 53263, coal: 43226 },
    { year: 2018, oil: 53793, coal: 43897 },
    { year: 2019, oil: 53997, coal: 43628 },
    { year: 2020, oil: 49101, coal: 42316 },
    { year: 2021, oil: 51847, coal: 44642 },
    { year: 2022, oil: 53562, coal: 44927 },
    { year: 2023, oil: 54839, coal: 45319 },
    { year: 2024, oil: 55292, coal: 45851 }
];

Area border

Use the border property to configure the border width, color, and dasharray of the area series.

import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, TooltipService, CategoryService, LegendService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { energyConsumptionData } from './datasource';

@Component({
    imports: [ChartModule, ChartAllModule],
    providers: [AreaSeriesService, CategoryService, LegendService, TooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [legendSettings]='legendSettings' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='oil' name='Oil' [border]='oilBorder'></e-series>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='coal' name='Coal' [border]='coalBorder'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    public oilBorder?: Object;
    public coalBorder?: Object;
    ngOnInit(): void {
        this.chartData = energyConsumptionData;
        this.primaryXAxis = {
            minimum: 2000, maximum: 2024,
            interval: 4, edgeLabelPlacement: 'Shift'
        };
        this.primaryYAxis = {
            title: 'Energy (TWh)',
            labelFormat: '{value} TWh'
        };
        this.title = 'Global primary energy consumption by source';
        this.legendSettings = { visible: true, enableHighlight: true };
        this.tooltip = { enable: true };
        this.oilBorder = { width: 2, color: '#962D18', dashArray: '2,5' };
        this.coalBorder = { width: 2, color: '#962D18', dashArray: '2,5' };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let energyConsumptionData: Object[] = [
    { year: 2000, oil: 43017, coal: 27456 },
    { year: 2001, oil: 43398, coal: 27880 },
    { year: 2002, oil: 43697, coal: 28982 },
    { year: 2003, oil: 44611, coal: 31520 },
    { year: 2004, oil: 46413, coal: 33709 },
    { year: 2005, oil: 47017, coal: 36201 },
    { year: 2006, oil: 47437, coal: 38087 },
    { year: 2007, oil: 48088, coal: 40242 },
    { year: 2008, oil: 47693, coal: 40797 },
    { year: 2009, oil: 46634, coal: 40219 },
    { year: 2010, oil: 48193, coal: 42016 },
    { year: 2011, oil: 48578, coal: 43983 },
    { year: 2012, oil: 49362, coal: 44099 },
    { year: 2013, oil: 49923, coal: 44745 },
    { year: 2014, oil: 50336, coal: 44912 },
    { year: 2015, oil: 51294, coal: 43695 },
    { year: 2016, oil: 52315, coal: 42768 },
    { year: 2017, oil: 53263, coal: 43226 },
    { year: 2018, oil: 53793, coal: 43897 },
    { year: 2019, oil: 53997, coal: 43628 },
    { year: 2020, oil: 49101, coal: 42316 },
    { year: 2021, oil: 51847, coal: 44642 },
    { year: 2022, oil: 53562, coal: 44927 },
    { year: 2023, oil: 54839, coal: 45319 },
    { year: 2024, oil: 55292, coal: 45851 }
];

Multicolored area

Create area series with different colored segments to highlight specific data ranges or categories.

To render a multicolored area series:

  1. Set the series type: Define the series type as MultiColoredArea.

  2. Inject the MultiColoredAreaSeries module: Use the @NgModule.providers method to inject the MultiColoredAreaSeries module.

  3. Customize the segments: Define the segments of the series using the segments property. Each segment can be customized with properties such as value, color, and dashArray.

    • value - Specifies the endpoint of the segment.
    • color - Defines the segment color.
    • dashArray - Defines dash patterns for the segment.
import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { MultiColoredAreaSeriesService, TooltipService, CategoryService, LegendService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { energyConsumptionData } from './datasource';

@Component({
    imports: [ChartModule, ChartAllModule],
    providers: [MultiColoredAreaSeriesService, CategoryService, LegendService, TooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [legendSettings]='legendSettings' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='MultiColoredArea' xName='year' yName='oil' name='Oil' segmentAxis='X' [segments]='segments'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    public segments?: Object[];
    ngOnInit(): void {
        this.chartData = energyConsumptionData;
        this.primaryXAxis = {
            minimum: 2000, maximum: 2024,
            interval: 4, edgeLabelPlacement: 'Shift'
        };
        this.primaryYAxis = {
            title: 'Energy (TWh)',
            labelFormat: '{value} TWh'
        };
        this.title = 'Global primary energy consumption by source';
        this.legendSettings = { visible: false, enableHighlight: true };
        this.tooltip = { enable: true };
        this.segments = [
            {
                value: 2008,
                color: '#f7a35c'
            }, 
            {
                value: 2016,
                color: '#7cb5ec'
            }, 
            {
                color: '#90ed7d'
            }
        ];
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let energyConsumptionData: Object[] = [
    { year: 2000, oil: 43017, coal: 27456 },
    { year: 2001, oil: 43398, coal: 27880 },
    { year: 2002, oil: 43697, coal: 28982 },
    { year: 2003, oil: 44611, coal: 31520 },
    { year: 2004, oil: 46413, coal: 33709 },
    { year: 2005, oil: 47017, coal: 36201 },
    { year: 2006, oil: 47437, coal: 38087 },
    { year: 2007, oil: 48088, coal: 40242 },
    { year: 2008, oil: 47693, coal: 40797 },
    { year: 2009, oil: 46634, coal: 40219 },
    { year: 2010, oil: 48193, coal: 42016 },
    { year: 2011, oil: 48578, coal: 43983 },
    { year: 2012, oil: 49362, coal: 44099 },
    { year: 2013, oil: 49923, coal: 44745 },
    { year: 2014, oil: 50336, coal: 44912 },
    { year: 2015, oil: 51294, coal: 43695 },
    { year: 2016, oil: 52315, coal: 42768 },
    { year: 2017, oil: 53263, coal: 43226 },
    { year: 2018, oil: 53793, coal: 43897 },
    { year: 2019, oil: 53997, coal: 43628 },
    { year: 2020, oil: 49101, coal: 42316 },
    { year: 2021, oil: 51847, coal: 44642 },
    { year: 2022, oil: 53562, coal: 44927 },
    { year: 2023, oil: 54839, coal: 45319 },
    { year: 2024, oil: 55292, coal: 45851 }
];

Empty points

Data points with null or undefined values are considered empty points. These points are handled according to the specified mode and can be customized for better visual representation.

Mode

Use the mode property to control handling of empty points. Available modes: Gap, Drop, Zero, Average. The default mode is Gap.

import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, TooltipService, CategoryService, LegendService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { energyConsumptionData } from './datasource';

@Component({
    imports: [ChartModule, ChartAllModule],
    providers: [AreaSeriesService, CategoryService, LegendService, TooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [legendSettings]='legendSettings' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='oil' name='Oil' [emptyPointSettings]='oilEmptyPointSettings'></e-series>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='coal' name='Coal' [emptyPointSettings]='coalEmptyPointSettings'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    public oilEmptyPointSettings?: Object;
    public coalEmptyPointSettings?: Object;
    ngOnInit(): void {
        this.chartData = energyConsumptionData;
        this.primaryXAxis = {
            minimum: 2000, maximum: 2024,
            interval: 4, edgeLabelPlacement: 'Shift'
        };
        this.primaryYAxis = {
            title: 'Energy (TWh)',
            labelFormat: '{value} TWh'
        };
        this.title = 'Global primary energy consumption by source';
        this.legendSettings = { visible: true, enableHighlight: true };
        this.tooltip = { enable: true };
        this.oilEmptyPointSettings = {
            mode: 'Gap'
        };
        this.coalEmptyPointSettings = {
            mode: 'Gap'
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let energyConsumptionData: Object[] = [
    { year: 2000, oil: 43017, coal: 27456 },
    { year: 2001, oil: 43398, coal: 27880 },
    { year: 2002, oil: 43697, coal: 28982 },
    { year: 2003, oil: 44611, coal: 31520 },
    { year: 2004, oil: 46413, coal: 33709 },
    { year: 2005, oil: 47017, coal: 36201 },
    { year: 2006, oil: 47437, coal: 38087 },
    { year: 2007, oil: 48088, coal: 40242 },
    { year: 2008, oil: null,  coal: null },
    { year: 2009, oil: 46634, coal: 40219 },
    { year: 2010, oil: 48193, coal: 42016 },
    { year: 2011, oil: 48578, coal: 43983 },
    { year: 2012, oil: 49362, coal: 44099 },
    { year: 2013, oil: 49923, coal: 44745 },
    { year: 2014, oil: 50336, coal: 44912 },
    { year: 2015, oil: 51294, coal: 43695 },
    { year: 2016, oil: 52315, coal: 42768 },
    { year: 2017, oil: 53263, coal: 43226 },
    { year: 2018, oil: null,  coal: null },
    { year: 2019, oil: 53997, coal: 43628 },
    { year: 2020, oil: 49101, coal: 42316 },
    { year: 2021, oil: 51847, coal: 44642 },
    { year: 2022, oil: 53562, coal: 44927 },
    { year: 2023, oil: 54839, coal: 45319 },
    { year: 2024, oil: 55292, coal: 45851 }
];

Fill

Customize the fill color of empty points using the fill property to maintain visual consistency or highlight missing data.

import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, TooltipService, CategoryService, LegendService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { energyConsumptionData } from './datasource';

@Component({
    imports: [ChartModule, ChartAllModule],
    providers: [AreaSeriesService, CategoryService, LegendService, TooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [legendSettings]='legendSettings' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='oil' name='Oil' [emptyPointSettings]='oilEmptyPointSettings' [marker]='marker'></e-series>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='coal' name='Coal' [emptyPointSettings]='coalEmptyPointSettings' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    public oilEmptyPointSettings?: Object;
    public coalEmptyPointSettings?: Object;
    public marker?: Object;
    ngOnInit(): void {
        this.chartData = energyConsumptionData;
        this.primaryXAxis = {
            minimum: 2000, maximum: 2024,
            interval: 4, edgeLabelPlacement: 'Shift'
        };
        this.primaryYAxis = {
            title: 'Energy (TWh)',
            labelFormat: '{value} TWh'
        };
        this.title = 'Global primary energy consumption by source';
        this.legendSettings = { visible: true, enableHighlight: true };
        this.tooltip = { enable: true };
        this.oilEmptyPointSettings = {
            mode: 'Average',
            fill: 'red'
        };
        this.coalEmptyPointSettings = {
            mode: 'Gap'
        };
        this.marker= { visible: true, width: 5, height: 5, isFilled: true };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let energyConsumptionData: Object[] = [
    { year: 2000, oil: 43017, coal: 27456 },
    { year: 2001, oil: 43398, coal: 27880 },
    { year: 2002, oil: 43697, coal: 28982 },
    { year: 2003, oil: 44611, coal: 31520 },
    { year: 2004, oil: 46413, coal: 33709 },
    { year: 2005, oil: 47017, coal: 36201 },
    { year: 2006, oil: 47437, coal: 38087 },
    { year: 2007, oil: 48088, coal: 40242 },
    { year: 2008, oil: null,  coal: null },
    { year: 2009, oil: 46634, coal: 40219 },
    { year: 2010, oil: 48193, coal: 42016 },
    { year: 2011, oil: 48578, coal: 43983 },
    { year: 2012, oil: 49362, coal: 44099 },
    { year: 2013, oil: 49923, coal: 44745 },
    { year: 2014, oil: 50336, coal: 44912 },
    { year: 2015, oil: 51294, coal: 43695 },
    { year: 2016, oil: 52315, coal: 42768 },
    { year: 2017, oil: 53263, coal: 43226 },
    { year: 2018, oil: null,  coal: null },
    { year: 2019, oil: 53997, coal: 43628 },
    { year: 2020, oil: 49101, coal: 42316 },
    { year: 2021, oil: 51847, coal: 44642 },
    { year: 2022, oil: 53562, coal: 44927 },
    { year: 2023, oil: 54839, coal: 45319 },
    { year: 2024, oil: 55292, coal: 45851 }
];

Border

Use the border property to customize the border width and color for empty points.

import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, TooltipService, CategoryService, LegendService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { energyConsumptionData } from './datasource';

@Component({
    imports: [ChartModule, ChartAllModule],
    providers: [AreaSeriesService, CategoryService, LegendService, TooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [legendSettings]='legendSettings' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='oil' name='Oil' [emptyPointSettings]='oilEmptyPointSettings' [marker]='marker'></e-series>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='coal' name='Coal' [emptyPointSettings]='coalEmptyPointSettings' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    public oilEmptyPointSettings?: Object;
    public coalEmptyPointSettings?: Object;
    public marker?: Object;
    ngOnInit(): void {
        this.chartData = energyConsumptionData;
        this.primaryXAxis = {
            minimum: 2000, maximum: 2024,
            interval: 4, edgeLabelPlacement: 'Shift'
        };
        this.primaryYAxis = {
            title: 'Energy (TWh)',
            labelFormat: '{value} TWh'
        };
        this.title = 'Global primary energy consumption by source';
        this.legendSettings = { visible: true, enableHighlight: true };
        this.tooltip = { enable: true };
        this.oilEmptyPointSettings = {
            mode: 'Average',
            fill: 'red',
            border: { width: 2, color: 'green' }
        };
        this.coalEmptyPointSettings = {
            mode: 'Gap'
        };
        this.marker= { visible: true, width: 6, height: 6, isFilled: true };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let energyConsumptionData: Object[] = [
    { year: 2000, oil: 43017, coal: 27456 },
    { year: 2001, oil: 43398, coal: 27880 },
    { year: 2002, oil: 43697, coal: 28982 },
    { year: 2003, oil: 44611, coal: 31520 },
    { year: 2004, oil: 46413, coal: 33709 },
    { year: 2005, oil: 47017, coal: 36201 },
    { year: 2006, oil: 47437, coal: 38087 },
    { year: 2007, oil: 48088, coal: 40242 },
    { year: 2008, oil: null,  coal: null },
    { year: 2009, oil: 46634, coal: 40219 },
    { year: 2010, oil: 48193, coal: 42016 },
    { year: 2011, oil: 48578, coal: 43983 },
    { year: 2012, oil: 49362, coal: 44099 },
    { year: 2013, oil: 49923, coal: 44745 },
    { year: 2014, oil: 50336, coal: 44912 },
    { year: 2015, oil: 51294, coal: 43695 },
    { year: 2016, oil: 52315, coal: 42768 },
    { year: 2017, oil: 53263, coal: 43226 },
    { year: 2018, oil: null,  coal: null },
    { year: 2019, oil: 53997, coal: 43628 },
    { year: 2020, oil: 49101, coal: 42316 },
    { year: 2021, oil: 51847, coal: 44642 },
    { year: 2022, oil: 53562, coal: 44927 },
    { year: 2023, oil: 54839, coal: 45319 },
    { year: 2024, oil: 55292, coal: 45851 }
];

Events

Series render

The seriesRender event enables modification of series properties (for example, data, fill, or name) immediately before rendering. Use this event to adjust series appearance or to dynamically swap data sources.

import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, TooltipService, CategoryService, LegendService } from '@syncfusion/ej2-angular-charts';
import { ISeriesRenderEventArgs } from '@syncfusion/ej2-charts';
import { Component, OnInit } from '@angular/core';
import { energyConsumptionData } from './datasource';

@Component({
    imports: [ChartModule, ChartAllModule],
    providers: [AreaSeriesService, CategoryService, LegendService, TooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [legendSettings]='legendSettings' [tooltip]='tooltip' (seriesRender)='seriesRender($event)'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='oil' name='Oil'></e-series>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='coal' name='Coal'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    ngOnInit(): void {
        this.chartData = energyConsumptionData;
        this.primaryXAxis = {
            minimum: 2000, maximum: 2024,
            interval: 4, edgeLabelPlacement: 'Shift'
        };
        this.primaryYAxis = {
            title: 'Energy (TWh)',
            labelFormat: '{value} TWh'
        };
        this.title = 'Global primary energy consumption by source';
        this.legendSettings = { visible: true, enableHighlight: true };
        this.tooltip = { enable: true };
    }
    public seriesRender(args: ISeriesRenderEventArgs): void {
        if (args.series.name === 'Oil') {
            args.fill = '#2E8B57';
        } else if (args.series.name === 'Coal') {
            args.fill = '#4B0082';
        }
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let energyConsumptionData: Object[] = [
    { year: 2000, oil: 43017, coal: 27456 },
    { year: 2001, oil: 43398, coal: 27880 },
    { year: 2002, oil: 43697, coal: 28982 },
    { year: 2003, oil: 44611, coal: 31520 },
    { year: 2004, oil: 46413, coal: 33709 },
    { year: 2005, oil: 47017, coal: 36201 },
    { year: 2006, oil: 47437, coal: 38087 },
    { year: 2007, oil: 48088, coal: 40242 },
    { year: 2008, oil: 47693, coal: 40797 },
    { year: 2009, oil: 46634, coal: 40219 },
    { year: 2010, oil: 48193, coal: 42016 },
    { year: 2011, oil: 48578, coal: 43983 },
    { year: 2012, oil: 49362, coal: 44099 },
    { year: 2013, oil: 49923, coal: 44745 },
    { year: 2014, oil: 50336, coal: 44912 },
    { year: 2015, oil: 51294, coal: 43695 },
    { year: 2016, oil: 52315, coal: 42768 },
    { year: 2017, oil: 53263, coal: 43226 },
    { year: 2018, oil: 53793, coal: 43897 },
    { year: 2019, oil: 53997, coal: 43628 },
    { year: 2020, oil: 49101, coal: 42316 },
    { year: 2021, oil: 51847, coal: 44642 },
    { year: 2022, oil: 53562, coal: 44927 },
    { year: 2023, oil: 54839, coal: 45319 },
    { year: 2024, oil: 55292, coal: 45851 }
];

Point render

The pointRender event provides a hook to customize each data point (for example, marker shape, border, or fill) before it is drawn. Use this to apply per-point styling rules or conditional formatting.

import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, TooltipService, CategoryService, LegendService } from '@syncfusion/ej2-angular-charts';
import { IPointRenderEventArgs } from '@syncfusion/ej2-charts';
import { Component, OnInit } from '@angular/core';
import { energyConsumptionData } from './datasource';

@Component({
    imports: [ChartModule, ChartAllModule],
    providers: [AreaSeriesService, CategoryService, LegendService, TooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [legendSettings]='legendSettings' [tooltip]='tooltip' (pointRender)='pointRender($event)'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='oil' name='Oil' [marker]='marker' opacity='0.5'></e-series>
            <e-series [dataSource]='chartData' type='Area' xName='year' yName='coal' name='Coal' [marker]='marker' opacity='0.5'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    public marker?: Object;
    ngOnInit(): void {
        this.chartData = energyConsumptionData;
        this.primaryXAxis = {
            minimum: 2000, maximum: 2024,
            interval: 4, edgeLabelPlacement: 'Shift'
        };
        this.primaryYAxis = {
            title: 'Energy (TWh)',
            labelFormat: '{value} TWh'
        };
        this.title = 'Global primary energy consumption by source';
        this.legendSettings = { visible: true, enableHighlight: true };
        this.tooltip = { enable: true };
        this.marker = { visible: true, width: 8, height: 8 };
    }
    public pointRender(args: IPointRenderEventArgs): void {
        if (args.point.index % 2 !== 0) {
            args.fill = '#2E8B57';
        } else {
            args.fill = '#4B0082';
        }
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let energyConsumptionData: Object[] = [
    { year: 2000, oil: 43017, coal: 27456 },
    { year: 2001, oil: 43398, coal: 27880 },
    { year: 2002, oil: 43697, coal: 28982 },
    { year: 2003, oil: 44611, coal: 31520 },
    { year: 2004, oil: 46413, coal: 33709 },
    { year: 2005, oil: 47017, coal: 36201 },
    { year: 2006, oil: 47437, coal: 38087 },
    { year: 2007, oil: 48088, coal: 40242 },
    { year: 2008, oil: 47693, coal: 40797 },
    { year: 2009, oil: 46634, coal: 40219 },
    { year: 2010, oil: 48193, coal: 42016 },
    { year: 2011, oil: 48578, coal: 43983 },
    { year: 2012, oil: 49362, coal: 44099 },
    { year: 2013, oil: 49923, coal: 44745 },
    { year: 2014, oil: 50336, coal: 44912 },
    { year: 2015, oil: 51294, coal: 43695 },
    { year: 2016, oil: 52315, coal: 42768 },
    { year: 2017, oil: 53263, coal: 43226 },
    { year: 2018, oil: 53793, coal: 43897 },
    { year: 2019, oil: 53997, coal: 43628 },
    { year: 2020, oil: 49101, coal: 42316 },
    { year: 2021, oil: 51847, coal: 44642 },
    { year: 2022, oil: 53562, coal: 44927 },
    { year: 2023, oil: 54839, coal: 45319 },
    { year: 2024, oil: 55292, coal: 45851 }
];

See also