I'm using ngx-charts-heat-map
to create a heat map. This is all going well enough, the map works, however, one small detail I can't figure out.
At the moment the higher the value of a cell, the more red it gets, and the lower the value, the less red it gets.
In my context however, a large number is good, a small number is bad, so I'd like the colours to be inverted, and I'm not sure how to do that here. Essentially, I want the user to be drawn to the things with low values, not high values.
Is there a setting I'm missing?
Yes, color scheme.
scheme
is an object containing the color scheme of the chart. You can use it with predefined colors like so:
<ngx-charts-heat-map
[view]="view"
scheme="neons"
...
Predefined list of named colormaps can be checked out here.
Or define your custom object like so:
(in template)
<ngx-charts-heat-map
[view]="view"
[scheme]="colorScheme"
...
(in component)
colorScheme = {
domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5', '#a8385d', '#aae3f5']
};
Taken straight from the official demo.
Adopt the color scheme to your needs.