Bar series: overview

Bar Series are categorical type of series that represent the objects from the data source as bars with different length. To use Bar series, you need to initialize a RadCartesianChart, define a CategoricalAxis and LinearAxis and bind the series to a set of data objects.


Just like with all angular 'pages' let's start with the Component in which we will place our RadCartesianChart instance. We create a basic angular Component that contains a collection of objects provided by an custom service, which will be used by the chart to provide intuitive data visualization.

The service is a simple 'mock' of an backend call that will return an array of objects:

import { Injectable } from '@angular/core';

export class DataService {

Inside that service we have a single function which returns an array:

getCategoricalSource(): Country[] {
    return [
        { Country: "Germany", Amount: 15, SecondVal: 14, ThirdVal: 24, Impact: 0, Year: 0 },
        { Country: "France", Amount: 13, SecondVal: 23, ThirdVal: 25, Impact: 0, Year: 0 },
        { Country: "Bulgaria", Amount: 24, SecondVal: 17, ThirdVal: 23, Impact: 0, Year: 0 },
        { Country: "Spain", Amount: 11, SecondVal: 19, ThirdVal: 24, Impact: 0, Year: 0 },
        { Country: "USA", Amount: 18, SecondVal: 8, ThirdVal: 21, Impact: 0, Year: 0 }
export class Country {
    constructor(public Country?: string, public Amount?: number, public SecondVal?: number, public ThirdVal?: number, public Impact?: number, public Year?: number) {

All that is left is to declare the template of the angular component in which we:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../data-services/data.service';
import { Country } from '../../data-services/country';
import { ObservableArray } from "data/observable-array";

    selector: 'tk-chart-series-bar',
    providers: [DataService],
    templateUrl: 'chart-series-bar.component.html'
export class ChartSeriesBarComponent implements OnInit {
    private _categoricalSource: ObservableArray<Country>;

    constructor(private _dataService: DataService) { }

    get categoricalSource(): ObservableArray<Country> {
        return this._categoricalSource;

    ngOnInit() {
        this._categoricalSource = new ObservableArray(this._dataService.getCategoricalSource());
<RadCartesianChart tkExampleTitle tkToggleNavButton>
    <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
    <LinearAxis tkCartesianVerticalAxis></LinearAxis>

    <BarSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="Country" valueProperty="Amount"></BarSeries>

Depending on the required Bar orientation, you can swap the axes' position and assign the CategoricalAxis to the horizontalAxis property and the Linear to the verticalAxis property. This will change the orientation of the bars to vertical.

Cartesian chart: Bar series Cartesian chart: Bar series