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 with three series of different kind which are customized. Consider the following series:

<chart:RadCartesianChart.series>
    <chart:SplineAreaSeries seriesName="Area" items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="ThirdVal"/>

    <chart:BarSeries seriesName="Bar" items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="SecondVal"/>

    <chart:LineSeries seriesName="Line" items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount"/>

</chart:RadCartesianChart.series>

We want to customize all of the series. We will use their seriesName to specify which palette is for which series. We want to change the stroke, as well as their fill color. Let's define a new palette for each series in the palettes collection of the chart:

<chart:RadCartesianChart.palettes>
    <chart:Palette seriesName="Bar">
        <chart:Palette.entries>
            <chart:PaletteEntry fillColor="#80FCE49D" strokeColor="#80E2A1F8"/>
        </chart:Palette.entries>
    </chart:Palette>
    <chart:Palette seriesName="Area">
        <chart:Palette.entries>
            <chart:PaletteEntry fillColor="#8060B3FC" strokeColor="#60B3FC"/>
        </chart:Palette.entries>
    </chart:Palette>
    <chart:Palette seriesName="Line">
        <chart:Palette.entries>
            <chart:PaletteEntry strokeColor="#FFCF40" strokeWidth="3"/>
        </chart:Palette.entries>
    </chart:Palette>
</chart:RadCartesianChart.palettes>

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

If you want to specify additional style for selected state of the series you need to define a new Palette with the corresponding seriesName and seriesState property set to Selected value as it is shown in the following example:

<chart:Palette seriesName="myBar" >
    <chart:Palette.entries>
        <chart:PaletteEntry  strokeWidth="3" strokeColor="Orange" fillColor="Yellow"/>
        <chart:PaletteEntry  strokeWidth="3" strokeColor="Pink" fillColor="Green"/>
    </chart:Palette.entries>
</chart:Palette>
<chart:Palette seriesName="myBar" seriesState="Selected">
    <chart:Palette.entries>
        <chart:PaletteEntry  strokeWidth="5" strokeColor="Yellow" fillColor="Orange"/>
        <chart:PaletteEntry  strokeWidth="5" strokeColor="Green" fillColor="Pink"/>
    </chart:Palette.entries>
</chart:Palette>

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.

References

Want to see this scenario in action?
Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.