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: 
[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;
}

```
You can use primeNg data table, and their cell formatting feature, we can format each cell based on certain condition like changing the color or painting it, this may help you.
[PrimeNg Cell Style](https://www.primefaces.org/primeng/#/table/style)