Plot bands and plot lines can be used within charts to add some highlighting to the overall chart. Both of them have the options for color, events, id, label, and z-index. In general, these lines and bands are always perpendicular to the axis they are defined with. Polar charts or gauge can also have data separators, but these behave differently, as there is no axis to have the separator perpendicular to.

Additional information can be found directly on the Highcharts page.

Configuration

For the example chart configuration in this article the Highcharts-Editor is used. 

There are two different possibilities to separate the visualisation within the chart:

  1. "plotLines"
  2. "plotBands"

They can be added and configured at the axis configuration under "Advanced":


plotLines

The "value" has to be set in axis units!


plotBands

The "from" and "to" values have to be set in axis units!


Picture


JSON for xAxis configuration

  "xAxis": {
    "plotBands": [
      {
        "from": 1,
        "to": 2
      }
    ],
    "plotLines": [
      {
        "value": 4.5
      }
    ]
  }


Full chart element configuration code

      "config": {
        "title": {
          "text": "My Chart"
        },
        "subtitle": {
          "text": "My Untitled Chart"
        },
        "exporting": {},
        "chart": {
          "type": "area",
          "polar": false
        },
        "plotOptions": {
          "series": {
            "dataLabels": {
              "enabled": true
            },
            "animation": false
          }
        },
        "series": [
          // configure series
        ]
        "yAxis": {
          "title": {}
        },
        "xAxis": {
          "plotBands": [
            {
              "from": 1,
              "to": 2
            }
          ],
          "plotLines": [
            {
              "value": 4.5
            }
          ]
        },
        "pane": {
          "background": []
        },
        "responsive": {
          "rules": []
        }
      }



Related Articles

Integration of Highcharts

Labels in Highcharts

Design minimalistic Highcharts

Design an Area Range and Line Chart