angulartypescript-typingsngx-charts

How do I invert colours on ngx-charts-heat-map


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?


Solution

  • 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.