如何在 ngx-charts-heat-map 上反转颜色

Question

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?

Answer 1

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.