Pre loader

JavaScript Chart Text Data Labels

JavaScript Chart - Examples

SciChart.js ships with over 80 JavaScript Chart demos which you can browse, view the source code and see related documentation. Build incredible complex dashboards with SciChart.js, our High Performance JavaScript Chart Library.

Getting Started

New to SciChart.js v3 and above! You can now add text data-labels to charts. The DataLabels API places text labels above or below data-points using our WebGL rendering engine.

Datalabels are fast: thousands of labels may be placed on a chart without slowdown.

With SciChart.js you can:

  • Display the Y-value, X,Y value, or custom text at each data-point.
  • Cull labels which overlap or specify which labels are visible
  • You can configure the colour of labels on a per-point basis

How to add DataLabels to SciChart.js

To enable text labels in SciChart.js, simply set the dataLabels property on any series.

const colSeries = new FastColumnRenderableSeries(wasmContext, {
	dataSeries: new XyDataSeries(wasmContext, data1),
	stroke: "Orange",
	fill: "Orange",
	dataPointWidth: 0.7,
	strokeThickness: 1,
	dataLabels: {
		// To enable datalabels, set style properties fontFamily and size
		style: { fontFamily: "Arial", fontSize: 14, padding: new Thickness(5,0,5,0) },
		color: "White",
		// Normal label format and precision options are supported
		precision: 2
	},
});

 

JavaScript Chart Examples

2D Charts

Chart Legends

3D Charts
Featured Apps
What's New