Per-Point Colouring of Bubble Charts

Colouring Bubble Series Datapoints with PaletteProvider

It is possible to override the Bubble series fill 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 returns a fill/stroke from overridePointMarkerArgb. Next, we attach to this a FastBubbleRenderableSeries.

Find an example below:

JavaScript
TypeScript

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

class BubblesPaletteProvider extends DefaultPaletteProvider {
    constructor() {
        super();
        this.strokePaletteMode = EStrokePaletteMode.SOLID;
        this.fillPaletteMode = EFillPaletteMode.SOLID;
        this.redFill = parseColorToUIntArgb('#FF0000');
    }
    overridePointMarkerArgb(
        xValue,
        yValue,
        index,
        opacity,
        metadata
    ) {
        return xValue >= 8 && xValue <= 12 ? {
            stroke: undefined,
            fill: this.redFill
        } : undefined;
    }
}

import {
    EFillPaletteMode,
    EStrokePaletteMode,
    IPointMarkerPaletteProvider,
    TPointMarkerArgb
} from 'scichart/Charting/Model/IPaletteProvider';
import { parseColorToUIntArgb } from 'scichart/utils/parseColor';
import { IRenderableSeries } from 'scichart/Charting/Visuals/RenderableSeries/IRenderableSeries';
import { IPointMetadata } from 'scichart/Charting/Model/IPointMetadata';

// Paletteprovider definition
class BubblesPaletteProvider implements IPointMarkerPaletteProvider {
    public readonly strokePaletteMode = EStrokePaletteMode.SOLID;
    public readonly fillPaletteMode = EFillPaletteMode.SOLID;
    private redFill = parseColorToUIntArgb('#FF0000');
    public onAttached(parentSeries: IRenderableSeries): void {}
    public onDetached(): void {}
    public overridePointMarkerArgb(
        xValue: number,
        yValue: number,
        index: number,
        opacity?: number,
        metadata?: IPointMetadata
    ): TPointMarkerArgb {
        return xValue >= 8 && xValue <= 12 ? { stroke: undefined, fill: this.redFill } : undefined;
    }
}

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

This results in the following output. Bubbles with an xValue greater than 8 or less than 12 are filled in red. Otherwise, undefined means "return the default colour".