The colorAxis.stops on the heatmap are used for more fine-grained control of the color. They are especially useful when we want to include more colors in our chart or create ranges without any gradient.
What is the difference between a basic heatmap and a heatmap with colorAxis.stops?
The basic settings for colorAxis are usually specified by minColor and maxColor. The following settings show the heatmap above.
Demo: https://jsfiddle.net/BlackLabel/Lmn2z9xc/
colorAxis: {
minColor: '#FF0000',
maxColor: '#0000FF',
},Whereas the same heatmap could be created by using stops.
Demo: https://jsfiddle.net/BlackLabel/9uL1a0zx/
colorAxis: {
stops: [
[0, '#FF0000'],
[1, '#0000FF']
]
},In both situations, colorAxis and the heatmap chart will look the same, but using stops, allow us to add an extra color on the colorAxis.
The following code represents the heatmap chart with three colors added via stops on the colorAxis.
Demo: https://jsfiddle.net/BlackLabel/56zrn9gf/
colorAxis: {
stops: [
[0, '#FF0000'],
[0.5, '#00FF00'],
[1, '#0000FF']
]
},How to use colorAxis stops?
The stops are an array of tuples. The first item is expressed by a float between 0 and 1 and the second item is the color.
[0, '#FF0000'],[0.5, '#00FF00'],[1, '#0000FF']
The number is actually a representation of the color’s place at the colorAxis. A 0 will be
the first color on the colorAxis and 1 will be the last one. Every float between them will be an additional color assigned to the relative position in the colorAxis .
What web color format should I use?
The recommended format is HEX. More about using colors in Highcharts:
https://www.highcharts.com/docs/chart-design-and-style/colors
How to create ranges without gradient?
You can create ranges without gradient using relevant values of the colorAxis.
Demo: https://jsfiddle.net/BlackLabel/recyxto2/
[0, '#FF0000'], [0.4, '#FF0000'], [0.5, '#00FF00'], [1, '#0000FF']
Using HTML Color Names instead of HEX format causes every color on the heatmap to be plain and colorAxis would remain gradient.
Demo: https://jsfiddle.net/BlackLabel/7ry8ocsf/
The color shouldn't be assigned to a point as well in that case. This is not a colorAxis property, so you would see only plain ranges on the heatmap but not on the colorAxis.
Demo: https://jsfiddle.net/BlackLabel/7hq86gpn/
Is there any limit of stops?
No, there is not. You can use as many stops as float numbers between 0 and 1.
Demo:
https://jsfiddle.net/BlackLabel/2fyj09v1/