Per-Point Colouring of Scatter Charts

Colouring Scatter Points Individually with PaletteProvider

It is possible to override the Scatter series point-marker fill & stroke colour on a per-datapoint basis in SciChart.js using the PaletteProvider API. First we need to create a class that implements the IPointMarkerPaletteProvider interface and return a custom stroke and fill for the pointmarker. Next, we attach to this a XyScatterRenderableSeries.

Find an example below

JavaScript
TypeScript

/**
 * An example PaletteProvider for overriding scatter points
 * This can be attached to line, mountain, column or candlestick series to change the pointmarker fill/stroke of the series conditionally
 */
class ScatterPointPaletteProvider extends DefaultPaletteProvider {
    constructor(stroke, rule) {
        super();
        this.strokePaletteMode = EStrokePaletteMode.SOLID;
        this.rule = rule;
        this.stroke = parseColorToUIntArgb(stroke);
    }
    overridePointMarkerArgb(xValue, yValue, index) {
        // Conditional logic for coloring here. Returning 'undefined' means 'use default renderableSeries colour'
        // else, we can return a color of choice.
        //
        // Note that colors returned are Argb format as number. There are helper functions which can convert from Html
        // color codes to Argb format.
        //
        // Performance considerations: overridePointMarkerArgb is called per-point on the series when drawing.
        // Caching color values and doing minimal logic in this function will help performance
        return this.rule(yValue) ? {
            stroke: this.stroke,
            fill: 0x000000,
        } : undefined;
    }
}

  
/**
 * An example PaletteProvider for overriding scatter points
 * This can be attached to line, mountain, column or candlestick series to change the pointmarker fill/stroke of the series conditionally
 */
class ScatterPointPaletteProvider implements IPointMarkerPaletteProvider {
    readonly strokePaletteMode: EStrokePaletteMode;
    private readonly stroke: number;
    private readonly rule: (yValue: number) => boolean;
    constructor(stroke: string, rule: (yValue: number) => boolean) {
        this.strokePaletteMode = EStrokePaletteMode.SOLID;
        this.rule = rule;
        this.stroke = parseColorToUIntArgb(stroke);
    }
    onAttached(parentSeries: IRenderableSeries): void {}
    onDetached(): void {}
    public overridePointMarkerArgb(xValue: number, yValue: number, index: number): TPointMarkerArgb {
        // Conditional logic for coloring here. Returning 'undefined' means 'use default renderableSeries colour'
        // else, we can return a color of choice.
        //
        // Note that colors returned are Argb format as number. There are helper functions which can convert from Html
        // color codes to Argb format.
        //
        // Performance considerations: overridePointMarkerArgb is called per-point on the series when drawing.
        // Caching color values and doing minimal logic in this function will help performance
        return this.rule(yValue) ? {
            stroke: this.stroke,
            fill: 0x000000,
        } : undefined;
    }
}

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

applying a paletteprovider

const columnSeries = XyScatterRenderableSeries(wasmContext, {
            pointMarker: new EllipsePointMarker(wasmContext, { width: 10, height: 10, strokeThickness: 2, fill: "SteelBlue", stroke: "SteelBlue"}),
            dataSeries,
            // The ScatterPointPaletteProvider (declared above) implements per-point coloring for scatter series
            paletteProvider: new ScatterPointPaletteProvider('#55FF55', yValue => yValue > 0.5)
});

This results in the following output. Scatter points with a Y-value greater than 0.5 are coloured as Lime green, else the default colour is used.