
# Bar Renderer

The Bar renderer displays the values of numeric column cells as bar boxes.  
If you look at the column where the Bar renderer is set, you can see that the bar box is marked as Gradient.

## Renderer properties

```js
const fields = [
  {
    fieldName: "KorName",
    dataType: "text"
  },
  {
    fieldName: "Gender",
    dataType: "text"
  },
  {
    fieldName: "Age",
    dataType: "number"
  },
  {
    fieldName: "Phone",
    dataType: "text"
  },
  {
    fieldName: "ProductId",
    dataType: "text"
  },
  {
    fieldName: "KorCountry",
    dataType: "text"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "CardNumber",
    dataType: "text"
  },
  {
    fieldName: "Monetary",
    dataType: "text"
  },
  {
    fieldName: "StartDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "EndDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "ToMonth",
    dataType: "number"
  },
  {
    fieldName: "Month",
    dataType: "number"
  },
  {
    fieldName: "Year",
    dataType: "number"
  },
  {
    fieldName: "InterestRate",
    dataType: "number"
  },
  {
    fieldName: "SaveCost",
    dataType: "number"
  },
  {
    fieldName: "SaveMaturity",
    dataType: "number"
  },
  {
    fieldName: "CurrentSave",
    dataType: "number"
  }
];

const columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
      text: "Name"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "Gender"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "100",
    renderer: {
      type: "bar",
      origin: "left",
      maximum: 100,
      minimum: 0,
      barWidth: "80%"
    },
    header: {
      text: 'origin: "left"'
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "100",
    renderer: {
      type: "bar",
      origin: "right",
      maximum: 100,
      minimum: 0,
      barWidth: "50%"
    },
    header: {
      text: 'origin: "right"'
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "100",
    renderer: {
      type: "bar",
      origin: "top",
      maximum: 100,
      minimum: 0,
      barWidth: "80%"
    },
    header: {
      text: 'origin: "top"'
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "100",
    renderer: {
      type: "bar",
      origin: "bottom",
      maximum: 100,
      minimum: 0,
      barWidth: "40%"
    },
    header: {
      text: 'origin: "bottom"'
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    styleName: "right-column",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductId",
    fieldName: "ProductId",
    width: "120",
    styleName: "right-column",
    header: {
      text: "Product ID"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "100",
    styleName: "right-column",
    header: {
      text: "Investment Country"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    header: {
      text: "Order Date"
    }
  },
  {
    name: "CardNumber",
    fieldName: "CardNumber",
    width: "140",
    header: {
      text: "Card Number"
    }
  },
  {
    name: "Monetary",
    fieldName: "Monetary",
    width: "40",
    header: {
      text: "Currency"
    }
  },
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "100",
    header: {
      text: "First Payment Date"
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "100",
    header: {
      text: "End Date"
    }
  },
  {
    name: "ToMonth",
    fieldName: "ToMonth",
    width: "50",
    header: {
      text: "Payment Count"
    },
    styleName: "right-column"
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "50",
    header: {
      text: "Remaining Count"
    },
    styleName: "right-column"
  },
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "50",
    header: {
      text: "Interest Rate"
    },
    styleName: "right-column"
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "70",
    header: {
      text: "Payment Amount"
    },
    styleName: "right-column"
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "120",
    header: {
      text: "Maturity Amount"
    },
    styleName: "right-column"
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "80",
    header: {
      text: "Current Balance"
    },
    styleName: "right-column"
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

```js
var columns = [
   ... skip ...
     {
       name: "Age",
       fieldName: "Age",
       width: "100",
       renderer: {
         type: "bar",
         origin: "left", //Direction of the bar box left, right, top, bottom
         maximum: 100, //maximum value
         minimum: 0, //minimum value
         barWidth: "80%" //Thickness of the bar box
       },
       header: {
         text: 'origin: "left"'
       }
     },
   ... skip ...
];

gridView.setColumns(columns);
```

## Renderer style

The style of the bar box in the bar renderer is defined in realgrid-style.css.

```js
.rg-bar-renderer {
     /*position: absolute; If you set it, it won't work in IE. */
     position: relative;
     width: 100%;
     height: 100%;
     left: 0px;
     top: 0px;
}

.rg-bar-renderer-bar {
     background: #2F8D27;
background: -webkit-linear-gradient(right, #96f58F, #2F8D27);
background: -moz-linear-gradient(right, #96f58F, #2F8D27);
background: -ms-linear-gradient(right, #96f58F, #2F8D27);
background: -o-linear-gradient(right, #96f58F, #2F8D27);
     background: linear-gradient(to left, #96f58F, #2F8D27);
}

.rg-bar-renderer-bar-right {
     background: #2F8D27;
background: -webkit-linear-gradient(left, #96f58F, #2F8D27);
background: -moz-linear-gradient(left, #96f58F, #2F8D27);
background: -ms-linear-gradient(left, #96f58F, #2F8D27);
background: -o-linear-gradient(left, #96f58F, #2F8D27);
background: linear-gradient(to right, #96f58F, #2F8D27);
}

.rg-bar-renderer-bar-top {
     background: #2F8D27;
background: -webkit-linear-gradient(bottom, #96f58F, #2F8D27);
background: -moz-linear-gradient(bottom, #96f58F, #2F8D27);
background: -ms-linear-gradient(bottom, #96f58F, #2F8D27);
background: -o-linear-gradient(bottom, #96f58F, #2F8D27);
background: linear-gradient(to top, #96f58F, #2F8D27);
}

.rg-bar-renderer-bar-bottom {
     background: #2F8D27;
background: -webkit-linear-gradient(top, #96f58F, #2F8D27);
background: -moz-linear-gradient(top, #96f58F, #2F8D27);
background: -ms-linear-gradient(top, #96f58F, #2F8D27);
background: -o-linear-gradient(top, #96f58F, #2F8D27);
background: linear-gradient(to bottom, #96f58F, #2F8D27);
}
```

If you want to change the color of the bar box, you can refer to the realgrid-styels.css file and add CSS styles.  
Let's change the color of each bar box in the column to solid Red, Green, Blue, and Yellow instead of linear-gradient.

```js
const fields = [
  {
    fieldName: "KorName",
    dataType: "text"
  },
  {
    fieldName: "Gender",
    dataType: "text"
  },
  {
    fieldName: "Age",
    dataType: "number"
  },
  {
    fieldName: "Phone",
    dataType: "text"
  },
  {
    fieldName: "ProductId",
    dataType: "text"
  },
  {
    fieldName: "KorCountry",
    dataType: "text"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "CardNumber",
    dataType: "text"
  },
  {
    fieldName: "Monetary",
    dataType: "text"
  },
  {
    fieldName: "StartDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "EndDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "ToMonth",
    dataType: "number"
  },
  {
    fieldName: "Month",
    dataType: "number"
  },
  {
    fieldName: "Year",
    dataType: "number"
  },
  {
    fieldName: "InterestRate",
    dataType: "number"
  },
  {
    fieldName: "SaveCost",
    dataType: "number"
  },
  {
    fieldName: "SaveMaturity",
    dataType: "number"
  },
  {
    fieldName: "CurrentSave",
    dataType: "number"
  }
];

const columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
      text: "Name"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "Gender"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "100",
    renderer: {
      type: "bar",
      origin: "left",
      maximum: 100,
      minimum: 0,
      barWidth: "80%"
    },
    header: {
      text: "red-bar-solid"
    },
    styleName: "red-bar-solid"
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "100",
    renderer: {
      type: "bar",
      origin: "right",
      maximum: 100,
      minimum: 0,
      barWidth: "50%"
    },
    header: {
      text: "green-bar-solid"
    },
    styleName: "green-bar-solid"
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "100",
    renderer: {
      type: "bar",
      origin: "top",
      maximum: 100,
      minimum: 0,
      barWidth: "80%"
    },
    header: {
      text: "blue-bar-solid"
    },
    styleName: "blue-bar-solid"
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "100",
    renderer: {
      type: "bar",
      origin: "bottom",
      maximum: 100,
      minimum: 0,
      barWidth: "40%"
    },
    header: {
      text: "yellow-bar-solid"
    },
    styleName: "yellow-bar-solid"
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    styleName: "right-column",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductId",
    fieldName: "ProductId",
    width: "120",
    styleName: "right-column",
    header: {
      text: "Product ID"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "100",
    styleName: "right-column",
    header: {
      text: "Investment Country"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    header: {
      text: "Order Date"
    }
  },
  {
    name: "CardNumber",
    fieldName: "CardNumber",
    width: "140",
    header: {
      text: "Card Number"
    }
  },
  {
    name: "Monetary",
    fieldName: "Monetary",
    width: "40",
    header: {
      text: "Currency"
    }
  },
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "100",
    header: {
      text: "First Payment Date"
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "100",
    header: {
      text: "End Date"
    }
  },
  {
    name: "ToMonth",
    fieldName: "ToMonth",
    width: "50",
    header: {
      text: "Payment Count"
    },
    styleName: "right-column"
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "50",
    header: {
      text: "Remaining Count"
    },
    styleName: "right-column"
  },
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "50",
    header: {
      text: "Interest Rate"
    },
    styleName: "right-column"
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "70",
    header: {
      text: "Payment Amount"
    },
    styleName: "right-column"
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "120",
    header: {
      text: "Maturity Amount"
    },
    styleName: "right-column"
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "80",
    header: {
      text: "Current Balance"
    },
    styleName: "right-column"
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

add style below

```js
.red-bar-solid .rg-bar-renderer-bar {
   background: #ff0000;
}

.green-bar-solid .rg-bar-renderer-bar-right {
   background: #00ff00;
}

.blue-bar-solid .rg-bar-renderer-bar-top {
   background: #0000ff;
}

.yellow-bar-solid .rg-bar-renderer-bar-bottom {
   background: #ffff00;
}
```