Dynamic colour range based on value

Question

I am trying to create a dynamic colour range so I can display some data. For example, if I have the values [1.0, 1.6, 2.3, 2.9, 3.5, 4.2, 4.7, 5.0] then I would like to be able to set e.g. 1.0 as the colour green, 2.5 as the colour yellow and 5.0 as the colour red, resulting in something like the screenshot shown below

And example in Angular is shown here: https://stackblitz.com/edit/angular-z32yhk?embed=1&file=app/app.component.ts

I do not just want to have a range from green to red for example, but it could be from yellow to purple. How would I go about doing this?

@RohanFating I don't know how to implement what I'm asking, that's why I'm asking in the first place, and I think my post is clear enough without a plunker. — Amos, Nov 23 '17 at 12:12
Though it is clear with your requirement, we appreciate if you atleast provide skeleton structure code so that we don't need to work from scratch. Respect others time as well. — Mr_Green, Nov 23 '17 at 12:16
To which kind of element should the background-color be affected ? A div, a table cell, ... ? — Antikhippe, Nov 23 '17 at 12:19

Mr_Green · Answer 1 · 2017-11-24T17:26:00.127

1

I will provide you the value generating function which you can *ngFor or do anything with it as per your need.

I am considering hsl type colors to give different colors here.

Base color value: hsl(40, 55%, 95%)
High color value : hsl(140, 55%, 95%)

attachColors() {
    const x = [1.0, 1.6, 2.3, 2.9, 3.5, 4.2, 4.7, 5.0];    // Your data
    const baseValue = 40;                                  // Base color value (red)
    const highValue = 140;                                 // Highest color value (green)
    const max = Math.max.apply(null, x);                   // Max value in your data
    const min = Math.min.apply(null, x);                   // Min value in your data
    let y = x.map(v => { 
              return {
                 value: v, 
                 color: (baseValue + (((v - min)/(max - min)) * (highValue - baseValue)))
              }
            });

    // Now "y" holds your data + color value for it
    return y;
}

Now in your template, you can probably do like this:

<li *ngFor="let d of attachColors()" [style.backgroundColor]="'hsl(' + d.color + ', 55%, 95%)'"></li>

edited Nov 24 '17 at 17:26

answered Nov 23 '17 at 13:06

Mr_Green

40,727
45
159
271

I tried getting this to work, but it doesn't actually apply the style. As a side note: use `const` instead of `let`. – Amos Nov 23 '17 at 13:16
The template example I provided is not a tested one. I tested the function which returning the values as required. – Mr_Green Nov 23 '17 at 13:19
@Esoemah Doing like this should work.. https://stackoverflow.com/a/38663363/1577396 – Mr_Green Nov 23 '17 at 13:26
I fixed it, but the colours aren't really correct for some reason. – Amos Nov 23 '17 at 13:27
Oh nice. Well, you can play with the range i.e base and high values. Or even may try to change other params of `hsl` color. – Mr_Green Nov 23 '17 at 13:28

Daniel Segura Pérez · Answer 2 · 2017-11-23T13:27:19.313

A new little example:

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <table style="width:100%">
        <tr>
          <th>value</th>
        </tr>
         <tr [ngStyle]="{'backgroundColor': 'rgba(0, 255, 0, 0.'+ n.toString().split('.')[1]  +')' }" *ngFor="let n of numbers">
          <td >{{n}}</td>
        </tr>
      </table>
    </div>
  `,
})
export class App {
  numbers:float[] = [1.1,1.3,1.4,1.9];
  constructor(){
    for(let n of this.numbers){
      console.log();
    }
  }


  //[ngClass]="{'red': n == 1, 'green': n == 2, 'orange': n == 3
      //          , 'pink': n == 4, 'blue': n == 5}"

}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {

}

Plunkr: https://plnkr.co/edit/ACuGatopbzFQERgRdZp9

Can you calculate the differents colours you want of any range of numbers(1,2,3,4,5..) and calculate & diferenciate with the opacity.

I said dynamic, not static. You are literally manually assigning a colour to a discrete value... what about `1.2` or `2.4` for example? I want them to be different colours than `1` and `2` respectively. — Amos, Nov 23 '17 at 12:49

Dynamic colour range based on value

2 Answers2