Labels in Highcharts

Modified on Thu, 30 Dec 2021 at 10:03 AM


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

  1. Align label "center", "left", "right"
  2. Background color: gradient customizable in JSON through RGBA
  3. Border color of field around label
  4. Radius of border → 0  = square, higher numbers for rounded corners
  5. Thickness of border
  6. Color of label text
  7. Rotation in degrees → when applied, the colored field around the label will disappear
  8. 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
  9. Horizontal alignment can be "top", "middle", "bottom". At default, the label is above positive and beneath negative values
  10. X position offset of the label relative to the point
  11. Y position offset of the label relative to the point




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

Integration of Highcharts

Design Area Range and Line Charts

Data Separator within a Chart

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article