PaletteProvider for Stacked Columns

StackedColumnRenderableSeries📘 series can be colored using the PaletteProvider API. To use this, we must create a class (TS) or object (JS) which implements or confirms to the IStrokePaletteProvider📘 and IFillPaletteProvider📘 interfaces. Then, apply this to the StackedColumnRenderableSeries.paletteProvider📘 property. This allows you to colour data-points based on values, or custom rules with infinite extensiblity.

First, let's create a PaletteProvider📘 class like this:

Creating the PaletteProvider

/**
 * Custom PaletteProvider for Stacked Column Series
 * Colors columns based on their values - higher values get warmer colors
 */
class StackedColumnPaletteProvider implements IFillPaletteProvider, IStrokePaletteProvider {
    public readonly fillPaletteMode = EFillPaletteMode.SOLID;
    public readonly strokePaletteMode = EStrokePaletteMode.SOLID;

    private readonly lowValueColor: number;
    private readonly mediumValueColor: number;
    private readonly highValueColor: number;
    private readonly strokeColor: number;

    constructor() {
        // Convert theme colors to ARGB numbers for performance
        this.lowValueColor = parseColorToUIntArgb("skyblue");
        this.mediumValueColor = parseColorToUIntArgb("orange");
        this.highValueColor = parseColorToUIntArgb("red");
        this.strokeColor = parseColorToUIntArgb("white");
    }

    onAttached(parentSeries: IRenderableSeries): void {}

    onDetached(): void {}

    // Override fill color based on Y value
    overrideFillArgb(
        xValue: number,
        yValue: number,
        index: number,
        opacity?: number,
        metadata?: IPointMetadata
    ): number {
        // Color based on value ranges
        if (yValue >= 50) {
            return this.highValueColor; // High values - red
        } else if (yValue >= 30) {
            return this.mediumValueColor; // Medium values - orange
        } else {
            return this.lowValueColor; // Low values - sky blue
        }
    }

    // Override stroke color
    overrideStrokeArgb(
        xValue: number,
        yValue: number,
        index: number,
        opacity?: number,
        metadata?: IPointMetadata
    ): number {
        return this.strokeColor; // Always white stroke
    }
}

Next, we can apply the PaletteProvider to the series. This can be done both with the programmatic API and the Builder API:

const rendSeries1 = new StackedColumnRenderableSeries(wasmContext, {
    dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: tomatoesData, dataSeriesName: "Tomato" }),
    fill: "red",
    stroke: "white",
    stackedGroupId: "Group0",
    dataLabels
});

// Apply custom paletteProvider after creation
rendSeries1.paletteProvider = new StackedColumnPaletteProvider();

const rendSeries2 = new StackedColumnRenderableSeries(wasmContext, {
    dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: pepperData, dataSeriesName: "Pepper" }),
    fill: "orange",
    stroke: "white",
    stackedGroupId: "Group0",
    dataLabels,
    paletteProvider: new StackedColumnPaletteProvider() // Apply custom paletteProvider during series creation
});
// Apply custom paletteProvider after creation
// rendSeries2.paletteProvider = paletteProvider1;

const rendSeries3 = new StackedColumnRenderableSeries(wasmContext, {
    dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: cucumberData, dataSeriesName: "Cucumber" }),
    fill: "skyblue",
    stroke: "white",
    stackedGroupId: "Group0",
    dataLabels
});
// Apply custom paletteProvider after creation
rendSeries3.paletteProvider = new StackedColumnPaletteProvider();

The code above results in a StackedColumnRenderableSeries📘 with the following rule: if (yValue >= 50) coror is red, else if (yValue >= 30) color is orange else color is skyblue. The result is shown below:

See Also​

See Also