SciChart.js JavaScript 2D Charts API > PaletteProvider API > Per-Point Colouring of Column Charts
Per-Point Colouring of Column Charts

Colouring Columns Individually with PaletteProvider

It is possible to override the Column series wick and body colour on a per-datapoint basis in SciChart.js using the PaletteProvider API. First we need to create a class that implements the IStrokePaletteProvider and IFillPaletteProvider interfaces and return a custom fill/stroke. Next, we attach to this a FastColumnRenderableSeries.

Find an example below

// PaletteProvider declaration
class ColumnPaletteProvider extends DefaultPaletteProvider {
    constructor() {
        super();
        this.strokePaletteMode = EStrokePaletteMode.SOLID;
        this.fillPaletteMode = EFillPaletteMode.SOLID;
        this.limeStroke = parseColorToUIntArgb('lime');
        this.yellowFill = parseColorToUIntArgb('yellow');
    }
    overrideFillArgb(xValue, yValue, index, opacity, metadata    ) {
        if (yValue < -0.9 || yValue > 0.9) {
            return opacity !== undefined ? uintArgbColorMultiplyOpacity(this.yellowFill, opacity) : this.yellowFill;
        } else {
            return undefined;
        }
    }
    overrideStrokeArgb(xValue, yValue, index, opacity, metadata) {
        if (yValue < -0.9 || yValue > 0.9) {
            return opacity !== undefined ? uintArgbColorMultiplyOpacity(this.limeStroke, opacity) : this.limeStroke;
        } else {
            return undefined;
        }
    }
}
// PaletteProvider declaration
class ColumnPaletteProvider implements IStrokePaletteProvider, IFillPaletteProvider {
    public readonly strokePaletteMode = EStrokePaletteMode.SOLID;
    public readonly fillPaletteMode = EFillPaletteMode.SOLID;
    private readonly limeStroke = parseColorToUIntArgb('lime');
    private readonly yellowFill = parseColorToUIntArgb('yellow');
    // tslint:disable-next-line:no-empty
    public onAttached(parentSeries: IRenderableSeries): void {}
    // tslint:disable-next-line:no-empty
    public onDetached(): void {}
    public overrideFillArgb(
        xValue: number,
        yValue: number,
        index: number,
        opacity?: number,
        metadata?: IPointMetadata
    ): number {
        if (yValue < -0.9 || yValue > 0.9) {
            return opacity !== undefined ? uintArgbColorMultiplyOpacity(this.yellowFill, opacity) : this.yellowFill;
        } else {
            return undefined;
        }
    }
    public overrideStrokeArgb(
        xValue: number,
        yValue: number,
        index: number,
        opacity?: number,
        metadata?: IPointMetadata
    ): number {
        if (yValue < -0.9 || yValue > 0.9) {
            return opacity !== undefined ? uintArgbColorMultiplyOpacity(this.limeStroke, opacity) : this.limeStroke;
        } else {
            return undefined;
        }
    }
}
               

To use it, apply to the Paletteprovider property on a RenderableSeries:

const columnSeries = new FastColumnRenderableSeries(wasmContext, {
    dataSeries,
    fill: '#FF3333',
    stroke: '#4682b4',
    strokeThickness: 7,
    dataPointWidth: 0.6,
    opacity: 1,
    paletteProvider: new ColumnPaletteProvider()
});

This results in the following output. Columns with a Y-value greater than 0.9 or less than -0.9 are coloured as Lime / Yellow, else the default colour is used.