Data Labels
Shows how you can add Data Labels to a chart using SciChart.js
drawExample.ts
index.tsx
ExampleDataProvider.ts
theme.ts
1import { appTheme } from "../../../theme";
2import { ExampleDataProvider } from "../../../ExampleData/ExampleDataProvider";
3
4import {
5 DataLabelProvider,
6 EllipsePointMarker,
7 ENumericFormat,
8 EVerticalTextPosition,
9 EWrapTo,
10 EXyDirection,
11 FastColumnRenderableSeries,
12 FastLineRenderableSeries,
13 formatNumber,
14 IPointMetadata,
15 MouseWheelZoomModifier,
16 NativeTextAnnotation,
17 NumberRange,
18 NumericAxis,
19 parseColorToUIntArgb,
20 SciChartSurface,
21 SplineLineRenderableSeries,
22 Thickness,
23 XyDataSeries,
24 ZoomExtentsModifier,
25 ZoomPanModifier,
26} from "scichart";
27
28export const drawExample = async (rootElement: string | HTMLDivElement) => {
29 // Create a SciChartSurface
30 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
31 theme: appTheme.SciChartJsTheme,
32 });
33
34 // Add an X, Y Axis
35 sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { visibleRangeLimit: new NumberRange(0, 20) }));
36 sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.05) }));
37
38 // normal labels
39 const data1 = ExampleDataProvider.getSpectrumData(0, 20, 5, 1, 0.01);
40 const colSeries = new FastColumnRenderableSeries(wasmContext, {
41 dataSeries: new XyDataSeries(wasmContext, data1),
42 fill: appTheme.VividOrange + "33",
43 stroke: appTheme.VividOrange,
44 dataPointWidth: 0.7,
45 strokeThickness: 1,
46 dataLabels: {
47 // To enable datalabels, set fontFamily and size
48 style: { fontFamily: "Arial", fontSize: 16, padding: new Thickness(5, 0, 5, 0) },
49 color: appTheme.VividOrange,
50 // Normal label format and precision options are supported
51 precision: 2,
52 },
53 });
54 const highCol = parseColorToUIntArgb(appTheme.VividGreen);
55 const lowCol = parseColorToUIntArgb(appTheme.VividOrange);
56 (colSeries.dataLabelProvider as DataLabelProvider).getColor = (state, text) => {
57 if (state.yVal() > 0) return highCol;
58 else return lowCol;
59 };
60 sciChartSurface.renderableSeries.add(colSeries);
61
62 const labels = ["Data", "Labels", "can", "come", "from", "values", "in", "metadata"];
63 sciChartSurface.renderableSeries.add(
64 new SplineLineRenderableSeries(wasmContext, {
65 dataSeries: new XyDataSeries(wasmContext, {
66 xValues: data1.xValues,
67 yValues: data1.yValues.map((y) => y * 0.8 + 4),
68 metadata: data1.xValues.map(
69 (x, i) => ({ isSelected: false, text: labels[(i - 1) / 2] } as IPointMetadata)
70 ),
71 }),
72 stroke: appTheme.VividSkyBlue,
73 strokeThickness: 3,
74 pointMarker: new EllipsePointMarker(wasmContext, {
75 width: 7,
76 height: 7,
77 fill: appTheme.ForegroundColor,
78 strokeThickness: 0,
79 }),
80 dataLabels: {
81 style: { fontFamily: "Arial", fontSize: 16 },
82 color: appTheme.ForegroundColor,
83 // @ts-ignore
84 metaDataSelector: (md) => md.text,
85 },
86 })
87 );
88
89 sciChartSurface.annotations.add(
90 new NativeTextAnnotation({
91 x1: 1,
92 y1: 10,
93 text: "Series with 1000 points, using custom getText function to only show labels for peaks, with x and y",
94 textColor: appTheme.VividGreen,
95 wrapTo: EWrapTo.ViewRect,
96 })
97 );
98
99 // Custom getText
100 const data2 = ExampleDataProvider.getSpectrumData(10, 1000, 10, 100, 0.02);
101 const series = new FastLineRenderableSeries(wasmContext, {
102 dataSeries: new XyDataSeries(wasmContext, {
103 xValues: data2.xValues.map((x) => x / 50),
104 yValues: data2.yValues.map((y) => y * 0.3 + 8),
105 }),
106 stroke: appTheme.VividGreen,
107 strokeThickness: 3,
108 dataLabels: {
109 style: { fontFamily: "Arial", fontSize: 14, padding: new Thickness(0, 0, 3, 0) },
110 color: appTheme.ForegroundColor,
111 aboveBelow: false,
112 verticalTextPosition: EVerticalTextPosition.Above,
113 },
114 });
115 (series.dataLabelProvider as DataLabelProvider).getText = (state) => {
116 const i = state.index;
117 if (
118 i > state.indexStart &&
119 i < state.indexEnd &&
120 state.yVal() > state.yVal(i - 1) &&
121 state.yVal() > state.yVal(i + 1)
122 ) {
123 return `X: ${formatNumber(state.xVal(), ENumericFormat.Decimal, 2)}\nY: ${formatNumber(
124 state.yVal(),
125 ENumericFormat.Decimal,
126 3
127 )}`;
128 }
129 return undefined;
130 };
131 sciChartSurface.renderableSeries.add(series);
132
133 sciChartSurface.annotations.add(
134 new NativeTextAnnotation({
135 x1: 1,
136 y1: 14,
137 text: "Series with 200 points. Using pointGapThreshold = 1 to show labels when zoomed in enough for there to be space for them",
138 textColor: appTheme.VividPink,
139 wrapTo: EWrapTo.ViewRect,
140 })
141 );
142 // Show labels when zoomed in
143 const data3 = ExampleDataProvider.getSpectrumData(0, 200, 10, 20, 0.02);
144 sciChartSurface.renderableSeries.add(
145 new FastLineRenderableSeries(wasmContext, {
146 dataSeries: new XyDataSeries(wasmContext, {
147 xValues: data3.xValues.map((x) => x / 10),
148 yValues: data3.yValues.map((y) => y * 0.3 + 12),
149 }),
150 stroke: appTheme.VividPink,
151 strokeThickness: 3,
152 dataLabels: {
153 style: { fontFamily: "Arial", fontSize: 12 },
154 color: appTheme.ForegroundColor,
155 pointGapThreshold: 1,
156 },
157 })
158 );
159
160 // Optional: Add some interactivity modifiers
161 sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
162 sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
163 sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }));
164
165 sciChartSurface.zoomExtents();
166
167 return { sciChartSurface, wasmContext };
168};
169Data Labels - React
Overview
This example demonstrates how to create a chart with advanced Data Labels customization using SciChart.js in a React application. The example shows how to add data labels to various series types such as column, spline, and line series, and illustrates how labels can be dynamically configured based on data values and metadata.
Technical Implementation
The chart is initialized through the <SciChartReact/> component, which leverages an initChart callback (implemented in the drawExample function) to set up axes, series, and custom data labels. The example employs the DataLabelProvider to define label styles and dynamic colors based on data values, and uses custom callback functions to format text (see Custom DataLabel Formatting with getText() - SciChart and Adding DataLabels to a Chart Series - SciChart for detailed documentation). The configuration of the chart follows the practices highlighted in Tutorial 02 - Creating a Chart with scichart-react, ensuring a clear separation of chart logic and React component structure.
Features and Capabilities
The example showcases several advanced features:
- Dynamic label styling where label colors change based on the Y-value.
- Metadata-driven labels where text is derived from additional data properties.
- Custom logic to display labels only for peaks in a large dataset, thereby optimizing label readability and performance.
These capabilities are enhanced by interactive annotations and chart modifiers such as zooming and panning, contributing to a highly interactive experience.
Integration and Best Practices
The integration leverages the <SciChartReact/> component to seamlessly embed high performance SciChart.js charts in a React application. Developers can follow the best practices outlined in React Charts with SciChart.js: Introducing “SciChart React” and Tutorial 01 - Setting up a project with scichart-react and config object for guidance on setting up chart components and optimizing performance. The use of efficient data series and interactive modifiers ensures the chart remains responsive even with large datasets, making it an excellent reference for building robust data visualization applications.
react Chart Examples & Demos
See Also: Styling and Theming (11 Demos)
Chart Background Image with Transparency
Demonstrates how to create a React Chart with background image using transparency in SciChart.js
Styling a React Chart in Code
Demonstrates how to style a React Chart entirely in code with SciChart.js themeing API
Using Theme Manager in React Chart
Demonstrates our Light and Dark Themes for React Charts with SciChart.js ThemeManager API
Create a Custom Theme for React Chart
Demonstrates how to create a Custom Theme for a SciChart.js React Chart using our Theming API
Coloring Series per-point using the PaletteProvider
Demonstrates per-point coloring in JavaScript chart types with SciChart.js PaletteProvider API
React Point-Markers Chart
Demonstrates the different point-marker types for React Scatter charts (Square, Circle, Triangle and Custom image point-marker)
Dashed Line Styling
Demonstrates dashed line series in React Charts with SciChart.js
React Chart with Multi-Style Series
Demonstrates how to apply multiple different styles to a single series using RenderDataTransform
React Chart with lines split by thresholds
Demonstrates how to use a RenderDataTransform to split lines into multiple segments so they can be individually colored according to thresholds
React Chart Title
Demonstrates chart title with different position and alignment options
React Order of Rendering Example
The React Order of Rendering example gives you full control of the draw order of series and annotations for charts. Try SciChart's advanced customizations.