SciChart.js JavaScript 2D Charts API > PaletteProvider API > Per-point Colouring of Line Segments
Per-point Colouring of Line Segments

Colouring Line Series Segments with PaletteProvider

Let's create a paletted Line Series.

First we need to create a palette provider, we can do this in TypeScript or JavaScript.

import { DefaultPaletteProvider, EStrokePaletteMode } from 'scichart/Charting/Model/IPaletteProvider';
import { parseColorToUIntArgb } from 'scichart/utils/parseColor';

// Custom PaletteProvider for line series
class LinePaletteProvider extends DefaultPaletteProvider {
    constructor(stroke, rule) {
        super();
        this.strokePaletteMode = EStrokePaletteMode.SOLID;
        this.rule = rule;
        this.stroke = parseColorToUIntArgb(stroke);
    }

    // This function is called for every data-point.
    // Return undefined to use the default color for the line,
    // else, return a custom colour as an ARGB color code, e.g. 0xFFFF0000 is red
    overrideStrokeArgb(xValue, yValue, index, opacity, metadata) {
        return this.rule(yValue) ? this.stroke : undefined;
    }
}
import { EStrokePaletteMode, IStrokePaletteProvider } from 'scichart/Charting/Model/IPaletteProvider';
import { IRenderableSeries } from 'scichart/Charting/Visuals/RenderableSeries/IRenderableSeries';
import { parseColorToUIntArgb } from 'scichart/utils/parseColor';

// Custom PaletteProvider for line series
class LinePaletteProvider implements IStrokePaletteProvider {
    readonly strokePaletteMode: EStrokePaletteMode = EStrokePaletteMode.SOLID;
    private stroke: number;
    private rule: (yValue: number) => boolean;
    constructor(stroke: string, rule: (yValue: number) => boolean) {
        this.rule = rule;
        this.stroke = parseColorToUIntArgb(stroke);
    }
    onAttached(parentSeries: IRenderableSeries): void {}
    onDetached(): void {}

    // This function is called for every data-point.
    // Return undefined to use the default color for the line,
    // else, return a custom colour as an ARGB color code, e.g. 0xFFFF0000 is red
    overrideStrokeArgb(xValue: number, yValue: number, index: number, opacity?: number, metadata?: IPointMetadata): number {
        return this.rule(yValue) ? this.stroke : undefined;
    }
}

Next we need to create an instance of the palette provider and assign it to IRenderableSeries.paletteProvider property.

const { sciChartSurface, wasmContext } = await SciChartSurface.create('scichart-div-id');
// Create XAxis
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
// Create YAxis
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
// Create a line series with your custom PaletteProvider
 sciChartSurface.renderableSeries.add(
     new FastLineRenderableSeries(wasmContext, {
         stroke: 'SteelBlue',
         strokeThickness: 5,
         dataSeries: createLineData(wasmContext),
         // The LinePaletteProvider (declared above) implements per-point coloring for line series
         paletteProvider: new LinePaletteProvider('#55FF55', yValue => yValue > 0.5)
     })
 );
sciChartSurface.zoomExtents();

As a result we will get this chart

In TypeScript you only need to implement an interface such as IStrokePaletteProvider, whereas in JavaScript you must extend the DefaultPaletteProvider class.

Gradient Transitions in Lines

Change strokePaletteMode to EStrokePaletteMode.GRADIENT to get a gradient color transition:

class LinePaletteProvider extends DefaultPaletteProvider {
    constructor(stroke, rule) {
        super();
        this.strokePaletteMode = EStrokePaletteMode.GRADIENT;
        // ..
    }
    // ..
}
class LinePaletteProvider implements IStrokePaletteProvider {
    readonly strokePaletteMode: EStrokePaletteMode = EStrokePaletteMode.GRADIENT;               
    // ...
}

This now results in gradient color changes between line segments.

Note: SciChart won't bisect the line at a threshold value but only changes colour between line segments in the data you already have. If you want to have a perfect transistion from one colour to another at a specific Y-value, you will need to include data-points
See Also