Data Label Colouring | JavaScript Chart Documentation

Data Label Colouring

New to SciChart.js v3! DataLabels allow per data-point text labels to be drawn on series, or arbitrary text labels at x,y positions on the chart.

You can see several datalabel examples on the SciChart.js demo:

The Line Chart example
The Column Chart example
The PaletteProvider example
The DataLabels demo
NEW in v3.4! The Stacked Column Chart demo
NEW in v3.4! The Population Pyramid demo

Explore these for some rich examples of how to use this API.

Label Colouring

The color property on the dataLabels option sets the color for all labels, but you can do per-label coloring by overriding the getColor() function on the dataLabelProvider.

This function hsa to return the integer color codes used by SciChart's engine, so you need to use parseColorToUIntArgb helper function to convert from html colors. It is a good idea to pre-calculate integer colour codes, rather than compute them each time labels are drawn, as in the example below.

Javascript

// Create a column series and add dataLabels
const columnSeries = new FastColumnRenderableSeries(wasmContext, {
  stroke: "SteelBlue",
  fill: "LightSteelBlue",
  strokeThickness: 1,
  dataSeries: new XyDataSeries(wasmContext, {
    xValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    yValues: [-3, -4, 0, 2, 6.3, 3, 4, 8, 7, 5, 6, 8],
  }),
  dataLabels: {
    positionMode: EColumnDataLabelPosition.Outside,
    style: {
      fontFamily: "Arial",
      fontSize: 18,
      padding: new Thickness(3, 0, 3, 0),
    },
    color: "#EEE",
  },
});
sciChartSurface.renderableSeries.add(columnSeries);

// Override the colouring using dataLabelProvider.getColor
// import { parseColorToUIntArgb } from "scichart";
const red = parseColorToUIntArgb("red");
const yellow = parseColorToUIntArgb("yellow");
const green = parseColorToUIntArgb("green");
columnSeries.dataLabelProvider.getColor = (dataLabelState, text) => {
  const y = dataLabelState.yVal();
  if (y <= 0) return red;
  if (y <= 5) return yellow;
  return green;
};

This results in the following output:

<div id="scichart-root" ></div>

body { margin: 0; }
#scichart-root { width: 100%; height: 100vh; }

async function dataLabelColoring(divElementId) {
  const {
    SciChartSurface,
    NumericAxis,
    FastColumnRenderableSeries,
    XyDataSeries,
    NumberRange,
    EColumnDataLabelPosition,
    parseColorToUIntArgb,
    Thickness,
    SciChartJsNavyTheme
  } = SciChart;

  // or for npm, import { SciChartSurface, ... } from "scichart"

  const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId, {
    theme: new SciChartJsNavyTheme()
  });

  sciChartSurface.xAxes.add(
    new NumericAxis(wasmContext, { growBy: new NumberRange(0.1, 0.1) })
  );
  sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, { growBy: new NumberRange(0.1, 0.1) })
  );

  // #region ExampleA
  // Create a column series and add dataLabels
  const columnSeries = new FastColumnRenderableSeries(wasmContext, {
    stroke: "SteelBlue",
    fill: "LightSteelBlue",
    strokeThickness: 1,
    dataSeries: new XyDataSeries(wasmContext, {
      xValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      yValues: [-3, -4, 0, 2, 6.3, 3, 4, 8, 7, 5, 6, 8],
    }),
    dataLabels: {
      positionMode: EColumnDataLabelPosition.Outside,
      style: {
        fontFamily: "Arial",
        fontSize: 18,
        padding: new Thickness(3, 0, 3, 0),
      },
      color: "#EEE",
    },
  });
  sciChartSurface.renderableSeries.add(columnSeries);

  // Override the colouring using dataLabelProvider.getColor
  // import { parseColorToUIntArgb } from "scichart";
  const red = parseColorToUIntArgb("red");
  const yellow = parseColorToUIntArgb("yellow");
  const green = parseColorToUIntArgb("green");
  columnSeries.dataLabelProvider.getColor = (dataLabelState, text) => {
    const y = dataLabelState.yVal();
    if (y <= 0) return red;
    if (y <= 5) return yellow;
    return green;
  };
  // #endregion ExampleA
}

dataLabelColoring("scichart-root");