Data Separator within a Chart

Modified on Wed, 01 Dec 2021 at 10:49 AM

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

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