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.
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
[cc lang=”html” width=”100%”]
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.
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:
And that is.
Farewell and good Hacking.