CODEWITHSUNDEEP
angular
Amos
Amos

Reputation: 1271

Dynamic colour range based on value

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

Colour range example from Excel

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?

Upvotes: 0

Views: 755

Answers (2)

Mr_Green
Mr_Green

Reputation: 41842

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>

Upvotes: 1

Daniel Segura P&#233;rez
Daniel Segura P&#233;rez

Reputation: 1117

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.

Upvotes: 0

Related Questions