Skip to main content

PaletteProvider API Overview

SciChart.js features the ability to change color of series on a point-by-point basis, using the PaletteProvider feature.

Many series types support PaletteProvider, including:

What is the PaletteProvider API?​

The PaletteProvider API allows you to achieve per data-point colouring or styling. Here is a quick example below. The following pages have further worked examples for each series type.

Above: The JavaScript Coloring Series per-point using PaletteProvider example from the SciChart.js Demo showing how to color data-points based on a rule.


The PaletteProvider API is a powerful extension in SciChart.js which allows you to colour line segments, scatter points, candles/columns or mountain chart segments based on a programatic rule.

Some common Use-cases for the PaletteProvider​

Some common use-cases for the PaletteProvider API include:

  • Changing colour of a line series when value exceeds a threshold.
  • Colouring candlesticks based on volume
  • Changing the Fill of a time-based Histogram based on day of the week
  • Highlighting important Scatter or Bubble points based on additional data.
tip

Use this API any time you want to change the colour, fill or scatter-point colours programmatically on a per-datapoint basis.

Enabling the PaletteProvider​

To enable the paletting feature, you need to create a class which conforms to the IStrokePaletteProvider📘, IFillPaletteProvider📘 or IPointMarkerPaletteProvider📘 interfaces and assign a new instance of the class to the IRenderableSeries.paletteProvider📘 property.

The following articles in this section show you how to do this for each series type: