Error Bar in Angular Chart component

19 Sep 202424 minutes to read

Error bar

Error bars are graphical representations of the variability of data and are used on graphs to indicate the error or uncertainty in a reported measurement.

To render error bars for the series in your chart, you need to follow a few steps to configure it correctly. Here’s a concise guide on how to do this:

  1. Set visibility: Set the visible property to true for the error bars to be displayed.

  2. Inject the ErrorBar module: Use the @NgModule.providers method to inject the ErrorBar module into your chart. This step is essential, as it ensures that the necessary functionalities for rendering error bar series are available in your chart.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ColumnSeriesService, LineSeriesService, ErrorBarService} from '@syncfusion/ej2-angular-charts'



import { Component, OnInit } from '@angular/core';

@Component({
imports: [
         ChartModule
    ],

providers: [ColumnSeriesService, LineSeriesService, ErrorBarService],
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='Line' xName='x' yName='y' name='India' width=2 [marker]='marker' [errorBar]='errorBar'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public errorBar?: Object;
    primaryYAxis: any;
    ngOnInit(): void {
        this.chartData = [
            { x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
            { x: 2008, y: 6.8 }, { x: 2009, y: 10.7 },
            { x: 2010, y: 10.8 }, { x: 2011, y: 9.8 }
        ];
        this.primaryXAxis = {
            minimum: 2005, maximum: 2012, interval: 1,
            title: 'Year'
        };
        this.marker = { visible: true };
        this.errorBar = { visible: true };
        this.title = 'Unemployment rate (%)';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let errorData: Object[] = [
            { x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
            { x: 2008, y: 6.8 }, { x: 2009, y: 5.7 },
            { x: 2010, y: 10.8 }, { x: 2011, y: 9.8 }
        ];

Error bar type

To change the error bar rendering type using type option of error bar. To change the error bar line length you can use verticalError property.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ColumnSeriesService, LineSeriesService, ErrorBarService} from '@syncfusion/ej2-angular-charts'



import { Component, OnInit } from '@angular/core';
import { errorData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ColumnSeriesService, LineSeriesService, ErrorBarService],
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='Line' xName='x' yName='y' name='India' width=2 [marker]='marker' [errorBar]='errorBar'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public errorBar?: Object;
    primaryXAxis: any;
    primaryYAxis: any;
    ngOnInit(): void {
        this.chartData = errorData;
        this.marker = { visible: true };
        this.errorBar = { visible: true,  type: 'Percentage', verticalError:4 };
        this.title = 'Unemployment rate (%)';
    }

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

Customizing error bar type

To customize the error bar type, set the error bar type to Custom, and then change the horizontal or vertical positive and negative error values for the error bar.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ColumnSeriesService, LineSeriesService, ErrorBarService} from '@syncfusion/ej2-angular-charts'



import { Component, OnInit } from '@angular/core';
import { errorData } from './datasource';

@Component({
imports: [
         ChartModule
    ],

providers: [ColumnSeriesService, LineSeriesService, ErrorBarService],
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='Line' xName='x' yName='y' name='India' width=2 [marker]='marker' [errorBar]='errorBar'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public errorBar?: Object;
    primaryXAxis: any;
    primaryYAxis: any;
    ngOnInit(): void {
        this.chartData = errorData;
        this.marker = { visible: true };
        this.errorBar = { 
            visible: true,
            type: 'Custom',
            mode:'Both',
            verticalPostiveError:3,
            horizontalPositiveError:2,
            verticalNegativeError:3,
            horizontalNegativeError:2
        } as Object;
        this.title = 'Unemployment rate (%)';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let errorData: Object[] = [
            { x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
            { x: 2008, y: 6.8 }, { x: 2009, y: 5.7 },
            { x: 2010, y: 10.8 }, { x: 2011, y: 9.8 }
        ];

Error bar mode

The error bar mode is used to define whether the error bar line is drawn horizontally, vertically or on both sides. To change the error bar mode, use the mode option.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ColumnSeriesService, LineSeriesService, ErrorBarService} from '@syncfusion/ej2-angular-charts'



import { Component, OnInit } from '@angular/core';
import { errorData } from './datasource';

@Component({
imports: [
         ChartModule
    ],

providers: [ColumnSeriesService, LineSeriesService, ErrorBarService],
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='Line' xName='x' yName='y' name='India' width=2 [marker]='marker' [errorBar]='errorBar'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public errorBar?: Object;
    primaryXAxis: any;
    primaryYAxis: any;
    ngOnInit(): void {
        this.chartData = errorData;
        this.marker = { visible: true };
        this.errorBar = { visible: true, mode: 'Horizontal' };
        this.title = 'Unemployment rate (%)';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let errorData: Object[] = [
            { x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
            { x: 2008, y: 6.8 }, { x: 2009, y: 5.7 },
            { x: 2010, y: 10.8 }, { x: 2011, y: 9.8 }
        ];

Error bar direction

To change the direction of the error bars to plus, minus, or both sides, use the direction property.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ColumnSeriesService, LineSeriesService, ErrorBarService} from '@syncfusion/ej2-angular-charts'



import { Component, OnInit } from '@angular/core';
import { errorData } from './datasource';

@Component({
imports: [
         ChartModule
    ],

providers: [ColumnSeriesService, LineSeriesService, ErrorBarService],
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='Line' xName='x' yName='y' name='India' width=2 [marker]='marker' [errorBar]='errorBar'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public errorBar?: Object;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = errorData;
        this.marker = { visible: true };
        this.errorBar = { visible: true,  mode:'Vertical', direction:'Minus' };
        this.title = 'Unemployment rate (%)';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let errorData: Object[] = [
            { x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
            { x: 2008, y: 6.8 }, { x: 2009, y: 5.7 },
            { x: 2010, y: 10.8 }, { x: 2011, y: 9.8 }
        ];

Customizing error bar cap

To customize the length, width, opacity, and fill color of the error bar caps, you can use the errorBarCap property.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ColumnSeriesService, LineSeriesService, ErrorBarService} from '@syncfusion/ej2-angular-charts'



import { Component, OnInit } from '@angular/core';
import { errorData } from './datasource';

@Component({
imports: [
         ChartModule
    ],

providers: [ColumnSeriesService, LineSeriesService, ErrorBarService],
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='Line' xName='x' yName='y' name='India' width=2 [marker]='marker' [errorBar]='errorBar'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public errorBar?: Object;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = errorData;
        this.primaryXAxis = {
            minimum: 2005, maximum: 2012, interval: 1,
            title: 'Year'
        };
        this.marker = { visible: true };
        this.errorBar = { visible: true, errorBarCap:{ length:10, width:10, color:'#0000ff'
} };
        this.title = 'Unemployment rate (%)';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let errorData: Object[] = [
            { x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
            { x: 2008, y: 6.8 }, { x: 2009, y: 5.7 },
            { x: 2010, y: 10.8 }, { x: 2011, y: 9.8 }
        ];

Customizing error bar color

To customise the error bar color for individual errors, use the errorBarColorMapping property. You can also customize the vertical error, horizontal error, horizontal negative and positive error, and vertical negative and positive error for an individual point using the verticalError, horizontalError, horizontalNegativeError, horizontalPositiveError, verticalNegativeError, and verticalPositiveError properties.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ColumnSeriesService, LineSeriesService, ErrorBarService} from '@syncfusion/ej2-angular-charts'
import { errorData } from './datasource'


import { Component, OnInit } from '@angular/core';

@Component({
imports: [
         ChartModule
    ],

providers: [ColumnSeriesService, LineSeriesService, ErrorBarService],
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='Line' xName='x' yName='y' name='India' width=2 [marker]='marker' [errorBar]='errorBar'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData: Object[] = errorData;
    public title?: string;
    public marker?: Object;
    public errorBar?: Object;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.primaryXAxis = {
            minimum: 2005, maximum: 2012, interval: 1,
            title: 'Year'
        };
        this.marker = { visible: true };
        this.errorBar = { visible: true, errorBarColorMapping: 'color', verticalError: 'error' };
        this.title = 'Unemployment rate (%)';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let errorData: Object[] = [
    { x: 2006, y: 7.8, color: 'red', error: 1.5 },
    { x: 2007, y: 7.2, color: 'green', error: 2.5 },
    { x: 2008, y: 6.8, color: 'blue', error: 3.5 },
    { x: 2009, y: 5.7, color: 'yellow', error: 1.5 },
    { x: 2010, y: 10.8, color: 'grey', error: 0.5 },
    { x: 2011, y: 9.8, color: 'brown', error: 1 },
        ];

Events

Series render

The seriesRender event allows you to customize series properties, such as data, fill, and name, before they are rendered on the chart.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ISeriesRenderEventArgs } from '@syncfusion/ej2-charts'
import { ColumnSeriesService, LineSeriesService, ErrorBarService} from '@syncfusion/ej2-angular-charts'



import { Component, OnInit } from '@angular/core';

@Component({
imports: [
         ChartModule
    ],

providers: [ColumnSeriesService, LineSeriesService, ErrorBarService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" (seriesRender)='seriesRender($event)' [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Line' xName='x' yName='y' name='India' width=2 [marker]='marker' [errorBar]='errorBar'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public errorBar?: Object;
    primaryYAxis: any;
    ngOnInit(): void {
        this.chartData = [
            { x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
            { x: 2008, y: 6.8 }, { x: 2009, y: 10.7 },
            { x: 2010, y: 10.8 }, { x: 2011, y: 9.8 }
        ];
        this.primaryXAxis = {
            minimum: 2005, maximum: 2012, interval: 1,
            title: 'Year'
        };
        this.marker = { visible: true };
        this.errorBar = { visible: true };
        this.title = 'Unemployment rate (%)';
    }
    public seriesRender(args: ISeriesRenderEventArgs){
        args.fill = '#ff6347';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let errorData: Object[] = [
            { x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
            { x: 2008, y: 6.8 }, { x: 2009, y: 5.7 },
            { x: 2010, y: 10.8 }, { x: 2011, y: 9.8 }
        ];

Point render

The pointRender event allows you to customize each data point before it is rendered on the chart.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { IPointRenderEventArgs } from '@syncfusion/ej2-charts'
import { ColumnSeriesService, LineSeriesService, ErrorBarService} from '@syncfusion/ej2-angular-charts'



import { Component, OnInit } from '@angular/core';

@Component({
imports: [
         ChartModule
    ],

providers: [ColumnSeriesService, LineSeriesService, ErrorBarService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" (pointRender)='pointRender($event)' [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Line' xName='x' yName='y' name='India' width=2 [marker]='marker' [errorBar]='errorBar'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public errorBar?: Object;
    primaryYAxis: any;
    ngOnInit(): void {
        this.chartData = [
            { x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
            { x: 2008, y: 6.8 }, { x: 2009, y: 10.7 },
            { x: 2010, y: 10.8 }, { x: 2011, y: 9.8 }
        ];
        this.primaryXAxis = {
            minimum: 2005, maximum: 2012, interval: 1,
            title: 'Year'
        };
        this.marker = { visible: true };
        this.errorBar = { visible: true };
        this.title = 'Unemployment rate (%)';
    }
    public pointRender(args: IPointRenderEventArgs){
        args.fill = '#ff6347';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let errorData: Object[] = [
            { x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
            { x: 2008, y: 6.8 }, { x: 2009, y: 5.7 },
            { x: 2010, y: 10.8 }, { x: 2011, y: 9.8 }
        ];

See Also