Styling series: Palettes

Telerik Chart for NativeScript uses Palettes to enable the customization of series. Depending on the count of series you have defined in your chart, you can add as many palettes as needed and change several visual parameters of the series. A single palette defines an entries property which contains PaletteEntry instances. A PaletteEntry is essentially a property bag which holds the values that are used to style the associated series. The following properties are exposed by a PaletteEntry object:

Example

To better illustrate the usage of Palettes, we will use a scenario in the RadCartesianChart with three series of different kind which are customized.

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';

@Injectable()
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 "tns-core-modules/data/observable-array";

@Component({
    moduleId: module.id,
    selector: 'tk-chart-styling-series',
    providers: [DataService],
    templateUrl: 'chart-styling-series.component.html'
})
export class ChartStylingSeriesComponent 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 seriesName="Bar" [items]="categoricalSource" categoryProperty="Country" valueProperty="SecondVal" stackMode="None"></BarSeries>
    <LineSeries tkCartesianSeries seriesName="Line" [items]="categoricalSource" categoryProperty="Country" valueProperty="Amount" stackMode="None"></LineSeries>
    <SplineAreaSeries tkCartesianSeries seriesName="Area" [items]="categoricalSource" categoryProperty="Country" valueProperty="ThirdVal" stackMode="None"></SplineAreaSeries>

    <Palette tkCartesianPalette seriesName="Bar">
        <PaletteEntry tkCartesianPaletteEntry fillColor="#80FCE49D" strokeColor="#80E2A1F8"></PaletteEntry>
    </Palette>
    <Palette tkCartesianPalette seriesName="Area">
        <PaletteEntry tkCartesianPaletteEntry fillColor="#8060B3FC" strokeColor="#60B3FC"></PaletteEntry>
    </Palette>
    <Palette tkCartesianPalette seriesName="Line">
        <PaletteEntry tkCartesianPaletteEntry strokeColor="#FFCF40" strokeWidth="3"></PaletteEntry>
    </Palette>
</RadCartesianChart>

Our palette consists of a single entry that defines values for fillColor, strokeColor and strokeWidth. What remains to be done is mapping the palette to the series it is meant to style. This is done by setting the seriesName property on the series and the palette to the same key. As you can see, the seriesName property is set to the Palette and the series to the same value - in that case Bar, Area and Line. You can use any string token here assuming it is the same on the corresponding series and the palette, as it serves as a mapping key between both.

The images below demonstrates the result of applying this palette to the Bar series:

Chart styling: Bar series Chart styling: Bar series

In this example the second palette values will be used when the series or data point is selected. If palette for selected state is not explicitly defined the default colors will be used.

PaletteMode

By default, the provided palettes (or the default colors) are applied per series, i.e. the first PaletteEntry from a palette will be applied to each of the items in the series. The paletteMode property can be used to change the way the palette is applied, i.e. the first PaletteEntry from the palette to be applied to the first item in the series, the second PaletteEntry to the second item, etc. You can choose from the following paletteMode values: Series or Item depending on how you want the palette to be applied. Here's how to change the paletteMode for BarSeries:

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

And here's the result on android (on the left) and on iOS (on the right):

Chart styling: PaletteMode Chart styling: PaletteMode

Note that the paletteMode is applicable only for series where it visually makes sense. LineSeries, SplineSeries, AreaSeries and SplineAreaSeries (where there are no separate items but only connections between them), the paletteMode is not supported.