Line series: overview

LineSeries are categorical type of series that represent the objects from the data source as dots connected with a line. To use Line 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-line',
    providers: [DataService],
    templateUrl: 'chart-series-line.component.html'
export class ChartSeriesLineComponent 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>
    <LineSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="Country" valueProperty="Amount"></LineSeries>

Here's how your Line chart should look like:

Cartesian chart: Line series Cartesian chart: Line series