Description
Highcharts have an integrated option to display data labels for charts. This article explains how to configure them using the Highcharts-Editor.
Further explanation on the integration of Highcharts to an app can be found here.
Access label configuration
To be able to use all configuration possibilities concerning the data labels it is necessary to use Advanced Customization. There you can select the graph type you want to use for visualization within the Plot Options item.
=> Advanced > Plot Options > [Graph Type] (e.g. Line) > Data Labels
Important features
- Align label "center", "left", "right"
- Background color: gradient customizable in JSON through RGBA
- Border color of field around label
- Radius of border → 0 = square, higher numbers for rounded corners
- Thickness of border
- Color of label text
- Rotation in degrees → when applied, the colored field around the label will disappear
- Is not ticked at default, although it is applied. As soon as it's selected once, it has to be ticked to enable the labels
- Horizontal alignment can be "top", "middle", "bottom". At default, the label is above positive and beneath negative values
- X position offset of the label relative to the point
- Y position offset of the label relative to the point
Example
JSON for Linechart
{
"id": "lineChart",
"type": "highcharts",
"source": "raw_testSource",
"config": {
"title": {
"text": "My Chart"
},
"subtitle": {
"text": "My Untitled Chart"
},
"exporting": {},
"chart": {
"type": "line",
"inverted": false
},
"series": [
{
"name": "Y"
},
{
"name": "Z"
}
],
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true,
"style": {
"color": "contrast",
"fontSize": "14px",
"fontWeight": "bold",
"textOutline": "1px 1px contrast"
}
}
},
"line": {
"dataLabels": {
"backgroundColor": "#f44336",
"allowOverlap": true,
"borderColor": "#1976d2",
"borderRadius": 10,
"borderWidth": 2,
"color": "#c6ff00",
"crop": true,
"defer": true,
"enabled": true,
"inside": false,
"y": -14,
"zIndex": 6,
"rotation": 0
}
}
},
"yAxis": {},
"pane": {
"background": []
},
"responsive": {
"rules": []
},
"xAxis": {}
}
}
Related Articles
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article