Question: I want to add databars behind values in the selected column in my grid like the [Data Bars Conditional Formatting](https://www.contextures.com/excel-conditional-formatting-data-bars.html) option in Excel.

This [answer](https://stackoverflow.com/questions/11159753/how-do-i-draw-excel-style-data-bars-in-a-jquery-datatable) show me the thing using jquery data table, Can anyone give me the idea for this in angular 6. 

Note: I am not using any 3rd party grid, I have created this grid from my own. 

It should look something like this.
[![enter image description here](https://i.stack.imgur.com/CmJt0.png)](https://i.stack.imgur.com/CmJt0.png)

Answer: 
Not sure in what scenario you want to add this, but have a look at this:
<https://css-tricks.com/css3-progress-bars/>

This is classic HTML and CSS "trick" to create a bar which you can define length of.

The basics of it is that you have a "wrapper" element that defines the maximum length, and a "bar" element inside that you set `width: [0-100]%` and a background color of that.

This would be an example on how to create a 50% wide blue bar.

```
.wrapper {
    width: 100%;
}

.bar {
    background: blue;
    height: 5px;
}

<div class="wrapper">
    <div class="bar" style="width: 50%"></div>
</div>

```

Use that to create an angular component that you can send you width to, something like this:

```
import { Component, Input } from '@angular/core';

@Component({
    selector: 'app-bar',
    template: `
      <div class="wrapper">
          <div class="bar" [style.width]="width"></div>
      </div>
    `,
    styles: [`
    .wrapper {
        width: 100%;
    }
    .bar {
        background: blue;
        height: 5px;
    }
    `]
})

export class BarComponent {
    @Input() width: number;
}

```
[This](https://codepen.io/Chiffie/pen/ZqYvaX) will do the job. 

```
@Component({
  selector: 'my-app',
  template: `
  <div class="holder">
    <div class="bar" *ngFor="let item of data">
      <div #bar class="{{item >= 0 ? 'positive' : 'negative'}}">
        <div class="size" [style.width.px]="getWidth(item, bar)">
          {{item}}
        </div>
      </div>
    </div>
  </div>
  `
})
class AppComponent {  
  maxValue = 100;  
  data: Number[] = [
    10,20,30,-45,90,-90,-80,50,100
  ]

  getWidth(dataItem: number, bar: HTMLElement):number {
    return (parseInt(bar.offsetWidth) / this.maxValue)  * Math.abs(dataItem);
  }
}

```

CSS: 

```
.holder {
  border: 1px solid black;
  margin: 10px;
  padding: 5px;
  width: 200px;
}

.bar {
  border: 1px solid grey;
  padding: 3px;
  margin: 10px 5px;
  text-align: center;
}

.positive {
  color: blue;
  width: 90px;
  margin-left: 90px;
}

.negative {
  color: red;
  width: 90px;
  margin-right: 90px;

  .size {
    margin-left: auto
  }
}

.size {
  background: green;
}

```