Adding DataLabels to a Chart Series

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.

The DataLabels API

Each RenderableSeries as a dataLabelProvider property. Many also accept Data Label configuration via constructor options.

These defines whether text labels are rendered for data-points, and the style and positioning of these text labels.

Adding Data Labels

You an configure data labels for almost any series by setting a valid style on the dataLabels property in the series options:

Javascript
json-builder

// Demonstrates how to add DataLabels to a chart with SciChart.js
const { SciChartSurface,
    NumericAxis,
    FastLineRenderableSeries,
    EllipsePointMarker,
    XyDataSeries,
    SciChartJsNavyTheme
} = SciChart;

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

// Create a chart with X, Y axis
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId, {
    theme: new SciChartJsNavyTheme()
});

sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

// Create a Line series with a pointmarker & some data
// We add dataLabels by setting the dataLabels constructor option
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    stroke: "SteelBlue",
    strokeThickness: 3,
    pointMarker: new EllipsePointMarker(wasmContext, {
        width: 10,
        height: 10,
        strokeThickness: 2,
        stroke: "SteelBlue",
        fill: "LightSteelBlue"
    }),
    dataSeries: new XyDataSeries(wasmContext, {
        xValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        yValues: [4.3, 5.3, 6, 6.3, 6, 5.2, 4.5, 4.6, 5, 6, 7, 8]
    }),
    // Data labels are enabled here. Simply set style, color
    dataLabels: {
        style: {
            fontFamily: "Arial",
            fontSize: 16
        },
        color: "#EEE"
    }
}));

// Demonstrates how to add DataLabels to a chart with SciChart.js using the Builder API
const {
    chartBuilder,
    ESeriesType,
    EThemeProviderType,
    EPointMarkerType
} = SciChart;

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

const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
    surface: { theme: { type: EThemeProviderType.Dark } },
    series: [
        {
            type: ESeriesType.LineSeries,
            xyData: {
                xValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                yValues: [4.3, 5.3, 6, 6.3, 6, 5.2, 4.5, 4.6, 5, 6, 7, 8]
            },
            options: {
                stroke: "#0066FF",
                strokeThickness: 5,
                pointMarker: {
                    type: EPointMarkerType.Ellipse,
                    options: {
                        width: 10,
                        height: 10,
                        strokeThickness: 2,
                        stroke: "SteelBlue",
                        fill: "LightSteelBlue"
                    }
                },
                // Data labels are enabled here. Simply set style, color
                dataLabels: {
                    style: {
                        fontFamily: "Arial",
                        fontSize: 16
                    },
                    color: "#EEE"
                }
            }
        }
    ]
});

This results in the following output:

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

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

async function dataLabelsBasicExample(divElementId) {
    // #region ExampleA
    // Demonstrates how to add DataLabels to a chart with SciChart.js
    const { SciChartSurface,
        NumericAxis,
        FastLineRenderableSeries,
        EllipsePointMarker,
        XyDataSeries,
        SciChartJsNavyTheme
    } = SciChart;

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

    // Create a chart with X, Y axis
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId, {
        theme: new SciChartJsNavyTheme()
    });

    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

    // Create a Line series with a pointmarker & some data
    // We add dataLabels by setting the dataLabels constructor option
    sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
        stroke: "SteelBlue",
        strokeThickness: 3,
        pointMarker: new EllipsePointMarker(wasmContext, {
            width: 10,
            height: 10,
            strokeThickness: 2,
            stroke: "SteelBlue",
            fill: "LightSteelBlue"
        }),
        dataSeries: new XyDataSeries(wasmContext, {
            xValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            yValues: [4.3, 5.3, 6, 6.3, 6, 5.2, 4.5, 4.6, 5, 6, 7, 8]
        }),
        // Data labels are enabled here. Simply set style, color
        dataLabels: {
            style: {
                fontFamily: "Arial",
                fontSize: 16
            },
            color: "#EEE"
        }
    }));
    // #endregion
}

dataLabelsBasicExample('scichart-root')




async function builderExample(divElementId) {
    // #region ExampleB
    // Demonstrates how to add DataLabels to a chart with SciChart.js using the Builder API
    const {
        chartBuilder,
        ESeriesType,
        EThemeProviderType,
        EPointMarkerType
    } = SciChart;

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

    const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
        surface: { theme: { type: EThemeProviderType.Dark } },
        series: [
            {
                type: ESeriesType.LineSeries,
                xyData: {
                    xValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                    yValues: [4.3, 5.3, 6, 6.3, 6, 5.2, 4.5, 4.6, 5, 6, 7, 8]
                },
                options: {
                    stroke: "#0066FF",
                    strokeThickness: 5,
                    pointMarker: {
                        type: EPointMarkerType.Ellipse,
                        options: {
                            width: 10,
                            height: 10,
                            strokeThickness: 2,
                            stroke: "SteelBlue",
                            fill: "LightSteelBlue"
                        }
                    },
                    // Data labels are enabled here. Simply set style, color
                    dataLabels: {
                        style: {
                            fontFamily: "Arial",
                            fontSize: 16
                        },
                        color: "#EEE"
                    }
                }
            }
        ]
    });
    // #endregion
};



// Uncomment this to use the builder example
    //builderExample("scichart-root");

Standard Label Formatting

Datalabels supports the same numeric format and precision options as axis labels. By default the Y-value is printed to the label. The numericFormat option is one of the ENumericFormat values.

Javascript
json-builder

sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    stroke: "SteelBlue",
    strokeThickness: 3,
    pointMarker,
    dataSeries,
    // Configure datalabel formatting using similar
    // numericFormat and precision options to the axis label formatting
    dataLabels: {
        numericFormat: ENumericFormat.Decimal,
        precision: 4,
        style: {
            fontFamily: "Arial",
            fontSize: 16
        },
        color: "#EEE"
    }
}));

const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
    surface: { theme: { type: EThemeProviderType.Dark } },
    series: [
        {
            type: ESeriesType.LineSeries,
            xyData: {
                xValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                yValues: [4.3, 5.3, 6, 6.3, 6, 5.2, 4.5, 4.6, 5, 6, 7, 8]
            },
            options: {
                stroke: "#0066FF",
                strokeThickness: 5,
                pointMarker,
                // ...

                // Configure datalabel formatting using similar
                // numericFormat and precision options to the axis label formatting
                dataLabels: {
                    numericFormat: ENumericFormat.Decimal,
                    precision: 4,
                    style: {
                        fontFamily: "Arial",
                        fontSize: 16
                    },
                    color: "#EEE"
                }
            }
        }
    ]
});

The precision is now increased to 4 decimal places

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

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

async function dataLabelsBasicFormatting(divElementId) {
    // Demonstrates how to add DataLabels with simple formatting to a chart with SciChart.js
    const { SciChartSurface,
        NumericAxis,
        FastLineRenderableSeries,
        EllipsePointMarker,
        XyDataSeries,
        SciChartJsNavyTheme,
        ENumericFormat
    } = SciChart;

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

    // Create a chart with X, Y axis
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId, {
        theme: new SciChartJsNavyTheme()
    });

    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

    const pointMarker = new EllipsePointMarker(wasmContext, {
        width: 10,
        height: 10,
        strokeThickness: 2,
        stroke: "SteelBlue",
        fill: "LightSteelBlue"
    });
    const dataSeries = new XyDataSeries(wasmContext, {
        xValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        yValues: [4.3, 5.3, 6, 6.3, 6, 5.2, 4.5, 4.6, 5, 6, 7, 8]
    });

    // #region ExampleA
    sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
        stroke: "SteelBlue",
        strokeThickness: 3,
        pointMarker,
        dataSeries,
        // Configure datalabel formatting using similar
        // numericFormat and precision options to the axis label formatting
        dataLabels: {
            numericFormat: ENumericFormat.Decimal,
            precision: 4,
            style: {
                fontFamily: "Arial",
                fontSize: 16
            },
            color: "#EEE"
        }
    }));
    // #endregion
}

dataLabelsBasicFormatting('scichart-root')




async function builderExample(divElementId) {
    // Demonstrates how to add DataLabels to a chart with SciChart.js using the Builder API
    const {
        chartBuilder,
        ESeriesType,
        EThemeProviderType,
        EPointMarkerType,
        ENumericFormat
    } = SciChart;

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

    const pointMarker = {
        type: EPointMarkerType.Ellipse,
        options: {
            width: 10,
            height: 10,
            strokeThickness: 2,
            stroke: "SteelBlue",
            fill: "LightSteelBlue"
        }
    };

    // #region ExampleB
    const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
        surface: { theme: { type: EThemeProviderType.Dark } },
        series: [
            {
                type: ESeriesType.LineSeries,
                xyData: {
                    xValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                    yValues: [4.3, 5.3, 6, 6.3, 6, 5.2, 4.5, 4.6, 5, 6, 7, 8]
                },
                options: {
                    stroke: "#0066FF",
                    strokeThickness: 5,
                    pointMarker,
                    // ...

                    // Configure datalabel formatting using similar
                    // numericFormat and precision options to the axis label formatting
                    dataLabels: {
                        numericFormat: ENumericFormat.Decimal,
                        precision: 4,
                        style: {
                            fontFamily: "Arial",
                            fontSize: 16
                        },
                        color: "#EEE"
                    }
                }
            }
        ]
    });
    // #endregion
};



// Uncomment this to use the builder example
    //builderExample("scichart-root");

Data Labels formatting uses similar code to the LabelProvider for axis labels. This means that labels can be formatted as dates, exponents or scientific notation.