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:x
– the value point in x coordinates. If thexAxis
property is defined, this value defines thexAxis
coordinates. If not, this is a pixel value.y
– same as above, but corresponding to the y coordinates.xAxis
– the index or the id of thexAxis
, 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.yAxis
– same as above, but regarding theyAxis
.
- 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.
Comments
There are no comments on this post
Want to leave a comment?
Comments are moderated. They will publish only if they add to the discussion in a constructive way. Please be polite.