Drawing plot bands with limits using annotations (Part 1)

Highcharts allows you to render plot bands and plot lines highlighting zones or values on an axis. Read more in the docs.

This article will show you how you can draw plot bands on your chart and limit them to not span across the whole axis range.

In basic plot band and plot line usage, the lines are drawn across the entire opposite axis. Even though you can change how they are plotted using plugins (like in demo below), the annotations module allows you to use this functionality out of the box, and here is how to do it.

First things first, you need to import the annotations module with this link:

<script src="https://code.highcharts.com/modules/annotations.js"></script>

Next, jump straight into plotting the plot bands. Start with the basic demo, where the only thing that is plotted is a basic line series. Then, define the annotations configuration object.

As listed in the anotations API reference, everything is pretty straightforward. The Annotations property is an array of objects defining the following groups of annotations. Each group can have its own properties defined, where the most important are an array of labels and an array of shapes. In the shapes object we need to specify the following things:

• type: path – this option will allow you to draw the shape from the points defined in the next option
• points – array of objects, where we will specify exact coordinates of the plotBand. Each point consists of the following properties:
  1. x – the value point in x coordinates. If the xAxis property is defined, this value defines the xAxis coordinates. If not, this is a pixel value.
  2. y – same as above, but corresponding to the y coordinates.
  3. xAxis – the index or the id of the xAxis, you want to refer to. (Remember, that there might be multiple axes, so you need to specify the exact axis). It can be left undefined, but then the x, and y properties values will be treated as pixel values.
  4. yAxis – same as above, but regarding the yAxis.
• Some additional properties, like fill, stroke, zIndex or anything that you like

In this article, the labels are used only to distinguish the custom plot bands more easily.

So now that everything is specified, the plot bands can be drawn!

There is also great flexibility with creating labels in relation to the plot band shape that you are drawing. You can specify the exact point where the label should be rendered, its shape, position relative to this point, and much more! Everything, as always, is listed in the API reference.
And here is the demo:

And that’s it!
Let us know if you find this article useful, and don’t hesitate to reach out to us in the comments or in one of our support channels.