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

  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


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

Integration of Highcharts

Design Area Range and Line Charts

Data Separator within a Chart