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:
Explore these for some rich examples of how to use this API.
In the article Adding DataLabels to Chart Series we showed you how to apply simple formatting rules to change the number of decimal places on Data Labels. What if you needed more complex Data Label formatting rules? Enter custom label formatting...
Custom Label Formatting
To take full control of the label text, override the dataLabelProvider.getText() function on the series renderableSeries.dataLabelProvider.
getText has a single parameter of type DataLabelState. This has a number of helper functions that allow you to get the x and y values and coordinates without having to worry about which way the axes run or if you are using a vertical chart.
This example outputs both X and Y Values. DataLabels are rendered using the new native text system, so they support multiline using \n for newlines. The dataLabels style option has multiLineAlignment and lineSpacing properties for controlling multiline text.
This results in custom text formatting output where a multiline label including index, [x: xValue, y: yValue] are drawn at each label:
<div id="scichart-root" ></div>
body { margin: 0; }
#scichart-root { width: 100%; height: 100vh; }
async function dataLabelProviderGetText(divElementId) {
const { SciChartSurface, NumericAxis,FastLineRenderableSeries, EllipsePointMarker, XyDataSeries, NumberRange,EMultiLineAlignment, 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, { growBy: new NumberRange(0.1, 0.2) }));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.2, 0.2) }));
// #region ExampleA
// Create a line series with dataLabels
const lineSeries = 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],
}),
// dataLabels style must be specified to show labels
dataLabels: {
style: {
fontFamily: "Arial",
fontSize: 16,
lineSpacing: 4,
multiLineAlignment: EMultiLineAlignment.Left
},
color: "#EEE"
}
});
// Override default dataLabelProvider.getText() function
// See type DataLabelState for available data
lineSeries.dataLabelProvider.getText = (dataLabelState) => {
return `Point index ${dataLabelState.index}\n[x: ${dataLabelState.xVal()}, y: ${dataLabelState.yVal()}]`;
};
// #endregion ExampleA
sciChartSurface.renderableSeries.add(lineSeries);
}
dataLabelProviderGetText('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"
}
}
}
]
});
// Note you can access dataLabelProvider from a constructed chart as follows
sciChartSurface.renderableSeries.get(0).dataLabelProvider.getText = (dataLabelState) => {
return `Point index ${dataLabelState.index}\n[x: ${dataLabelState.xVal()}, y: ${dataLabelState.yVal()}]`;
};
// #endregion
};
// Uncomment this to use the builder example
//builderExample("scichart-root");