ColorAxis Bands

This Highcharts plugin changes the gradient used on the ColorAxis and adds a continous color band between ticks.


A ColorAxis can be used to transmit accurate information.

Unfortunately, human eyes can get pretty confused by continuous gradients (e.g., Checker shadow illusion).

In these cases, it's better to only use a few discrete colors that can be easily distinguished, which means colour banding.


The amount of banding can be configured via banding property, where:

  • 0 or false means no-banding, and is the same as not using this plugin
  • 1 or true will result in completely discrete color bands
  • Any number between 0 and 1 will result in continuous bands with smooth transitions in between

I've found that 40-60% works nicely on contour curve charts, but YMMV.