An alternative way to define the color axis is to have a specific range of values associated with a color. Let's plot another heatmap chart. In this example, we reconstruct a graph taken from http://kindofnormal.com/truthfacts, shown here:

To recreate the preceding chart, we first use an inverted heatmap to emulate it as a bar chart, but the bars itself are composed of cells with a gradual change of color. We treat each block as a unit of y axis value and every two intervals associates with a color value. Hence, the range along the y-axis is between 0 and 8. Here is the trimmed configuration:

     yAxis: {
         title: { text: null },
         gridLineWidth: 0,
         minorTickWidth: 1,
         max: 8,
         min: 0,
         offset: 8,
         labels: {
             style: { .... },
             formatter: ....,

Then, we specify the colorAxis with dataClasses options which divide the value range into four groups of...