Multiple Series in Angular Chart

28 Aug 202613 minutes to read

Multiple series

The chart accepts an ordered collection of series on the <ejs-chart> host, rendered in the order they are declared. You can mix series types (for example, Line and Column) and bind complex (nested) data objects.

Series are rendered in the order they are added to the collection. Use the <e-series-collection> parent and one <e-series> child per data series.

import { ChartModule, CategoryService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, ColumnSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='gold' name='Gold'></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='silver' name='Silver'></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='bronze' name='Bronze'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public chartData?: Object[];
    public title?: string;

    ngOnInit(): void {
        this.chartData = [
            { country: 'USA', gold: 50, silver: 70, bronze: 45 },
            { country: 'China', gold: 40, silver: 60, bronze: 55 },
            { country: 'Japan', gold: 70, silver: 60, bronze: 50 },
            { country: 'Australia', gold: 60, silver: 56, bronze: 40 },
            { country: 'France', gold: 50, silver: 45, bronze: 35 },
            { country: 'Germany', gold: 40, silver: 30, bronze: 22 },
            { country: 'Italy', gold: 40, silver: 35, bronze: 37 },
            { country: 'Sweden', gold: 30, silver: 25, bronze: 27 }
        ];
        this.primaryXAxis = {
            valueType: 'Category',
            title: 'Countries'
        };
        this.primaryYAxis = {
            title: 'Medals',
            minimum: 0,
            maximum: 80,
            interval: 20
        };
        this.title = 'Olympic Medals';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Combination series

Render combinations of different series types (for example, Line and Column) in a single chart. Set each <e-series> element’s type to a different value to mix them. The series are rendered in declaration order, with later series drawn on top of earlier ones.

A Bar series cannot be combined with other series because its horizontal axis orientation differs from other series.

import { ChartModule, CategoryService, StackingColumnSeriesService, LineSeriesService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, StackingColumnSeriesService, LineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StackingColumn' xName='x' yName='y' name='Private Consumption'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn' xName='x' yName='y1' name='Government Consumption'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn' xName='x' yName='y2' name='Investment'></e-series>
            <e-series [dataSource]='chartData' type='StackingColumn' xName='x' yName='y3' name='Net Foreign Trade'></e-series>
            <e-series [dataSource]='chartData' type='Line' xName='x' yName='y4' name='GDP' [marker]='marker' opacity='0.6'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;

    ngOnInit(): void {
        this.chartData = [
            { x: '2005', y: 1.2, y1: 0.5, y2: 0.7, y3: -0.8, y4: 1.5 },
            { x: '2006', y: 1, y1: 0.5, y2: 1.4, y3: 0, y4: 2.3 },
            { x: '2007', y: 1, y1: 0.5, y2: 1.5, y3: -1, y4: 2 },
            { x: '2008', y: 0.25, y1: 0.35, y2: 0.35, y3: -0.35, y4: 0.1 },
            { x: '2009', y: 0.1, y1: 0.9, y2: -2.7, y3: -0.3, y4: -2.7 },
            { x: '2010', y: 1, y1: 0.5, y2: 0.5, y3: -0.5, y4: 1.8 },
            { x: '2011', y: 0.1, y1: 0.25, y2: 0.25, y3: 0, y4: 2 },
            { x: '2012', y: -0.25, y1: -0.5, y2: -0.1, y3: -0.4, y4: 0.4 },
            { x: '2013', y: 0.25, y1: 0.5, y2: -0.3, y3: 0, y4: 0.9 },
            { x: '2014', y: 0.6, y1: 0.6, y2: -0.6, y3: -0.6, y4: 0.4 },
            { x: '2015', y: 0.9, y1: 0.5, y2: 0, y3: -0.3, y4: 1.3 }
        ];
        this.primaryXAxis = {
            title: 'Years',
            valueType: 'Category',
            interval: 1,
            labelIntersectAction: 'Rotate45'
        };
        this.primaryYAxis = {
            title: 'Growth',
            minimum: -3,
            maximum: 3,
            interval: 1
        };
        this.marker = { visible: true, width: 10, height: 10, opacity: 0.6 };
        this.title = 'Annual Growth GDP in France';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enable complex property in series

Set enableComplexProperty to true on a series to bind complex (nested) data objects to the chart. Each dataSource entry can include nested properties, and field mappings (xName, yName, open, close, high, low, size, …) accept dotted paths such as data.x or data.y.value.

import { ChartModule, CategoryService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, ColumnSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" align='center' [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Column' xName='group.x' yName='group.y' name='Gold' width='2' [enableComplexProperty]='true'></e-series>
            <e-series [dataSource]='data' type='Column' xName='group.x' yName='y' name='Silver' width='2' [enableComplexProperty]='true'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public data: Object[] = [
        { group: { x: 'USA', y: 10 }, y: 20 },
        { group: { x: 'China', y: 30 }, y: 10 }
    ];
    public primaryXAxis: Object = {
        valueType: 'Category'
    };
    public title: string = 'Olympic Medal Counts - RIO';

    ngOnInit(): void {
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Troubleshooting

The following symptoms map to the most common configuration issues.

  • Only the last series is rendered: Confirm the <e-series> elements are inside a single <e-series-collection> parent, and that each series has its own dataSource or shares the parent series’s data with the proper xName/yName mappings.
  • Combination chart shows no data for one series: Verify the type is set on each <e-series>, and that the matching series service (for example, LineSeriesService, ColumnSeriesService) is registered in providers.
  • A Bar series overlaps other series: A Bar series cannot be combined with other series. Use a Column series instead, or render the Bar series in its own chart.
  • Dotted field paths do not resolve: Confirm enableComplexProperty is set to true on the series; otherwise the chart only reads top-level fields.

See also

Related series

Cross references