Highcharts: higlighting the X axis on plot bands

Currently we are using highcharts.js for a client for whom we built monitor dashboards. One of the requirements was to highlight the axis every time that a plot band was displayed.

axe-highligthed

The issue here is that the axis are outside the plotting area. The solution that we found is to use the Highcharts drawing library in order to draw a rectangle over the axis and just at the bottom of the plot bands. To achieve this we had to dive into in how the band was drawn with svg.

Every plot band is a tag with the coordinates in the “d” attribute (You can read more about paths Here)

<path fill="rgba(68, 170, 213, .2)" d="M 608.5 45 L 608.5 365 743.5 365 743.5 45" visibility="visible"></path>

As I told you the solution was to draw a rectangle (rect in svg) rightat the bottom of that path element and over the axis. A rect tag is simpler because it takes as parameter the x, y coordinate of the top-left corner and a height and width values.

For that we created a javascript function that parses the d attribute and use the load event of the chart to draw the rectangle.

I don’t want to enter in high technical details about how the d attribute works so I will give you the next fiddle for you to see the code working:

Highcharts highlighting the X axis on plot bands

And that is.

Farewell and good Hacking.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.