Data labels in JavaScript 3D Chart control
18 Nov 20182 minutes to read
Data labels are fields that includes information about the sample point connected to an output. It can be added to a chart series by enabling the visible property in the dataLabel. By default, the labels will arrange smartly without overlapping.
Note: To use data label feature, we need to inject
DataLabel3Dmodule usingChart3D.Inject(DataLabel3D)method.
Position
The position property is used to place the label either on Top, Middle, or Bottom.
Template
Label content can be formatted by using the template option. Inside the template, the placeholder text ${point.x} and ${point.y} can be added to display corresponding data points x & y value. Using template property, the data label template can be set.
Text mapping
Text from the data source can be mapped using the name property.
Format
Data label for the chart can be formatted using the format property. The global formatting options can be used as ‘n’, ‘p’, and ‘c’.
| Value | Format | Resultant Value | Description |
|---|---|---|---|
| 1000 | n1 | 1000.0 | The number is rounded to 1 decimal place. |
| 1000 | n2 | 1000.00 | The number is rounded to 2 decimal places. |
| 1000 | n3 | 1000.000 | The number is rounded to 3 decimal place. |
| 0.01 | p1 | 1.0% | The number is converted to percentage with 1 decimal place. |
| 0.01 | p2 | 1.00% | The number is converted to percentage with 2 decimal place. |
| 0.01 | p3 | 1.000% | The number is converted to percentage with 3 decimal place. |
| 1000 | c1 | $1000.0 | The currency symbol is appended to number and number is rounded to 1 decimal place. |
| 1000 | c2 | $1000.00 | The currency symbol is appended to number and number is rounded to 2 decimal place. |
Margin
The margin for data label can be applied by using left, right, bottom and top properties.
Customization
The stroke and border of data label can be customized using fill and border properties.
Customizing specific label
A specific label can be customized by using the textRender event. The textRender event allows you to change the label text for the point.