# Bar Chart

Bar chart is a type of chart that represent data with rectangular bars. Bars area (or more often length at the equal width of rectangular) proportional to the value that they represent.

## Example

![example bar chart](imgs/barChart_example_1.png)

```js

import React from 'react';
import ReactDOM from 'react-dom';
import r3 from 'r3-charts'

// get bar chart component
const BarChart = r3.BarChart;

// source data
const data = [
  {name: 'jan',value: -6.5},
  {name: 'feb',value: -6.7},
  {name: 'mar',value: -1},
  {name: 'apr',value: 6.7},
  {name: 'may',value: 13.2},
  {name: 'jun',value: 17.0},
  {name: 'jul',value: 19.2},
  {name: 'aug',value: 17.0},
  {name: 'sep',value: 11.3},
  {name: 'oct',value: 5.6},
  {name: 'nov',value: -1.2},
  {name: 'dec',value: -5.2}
];

// color-value map
const color = [
  {color: '#0000ff', value: -30},
  {color: '#135ba9', value: -20},
  {color: '#98cced', value: 0},
  {color: '#eba39f', value: 0.0001},
  {color: '#e74040', value: 17},
  {color: '#e50c0c', value: 22},
  {color: '#e50c0c', value: 27}
];

ReactDOM.render(
  <BarChart data={data} color={color}/>,
  document.getElementById('app')
);

```

## Properties

Name              | Type          | Default                       | Description
---               | ---           | ----                          | ---
data *            | array         | -                             | The source data in which each element is an object, like:  `{name: 'name', value: -6.5}`
animation         | object        | `{duration: 500}`             | The chart animation settings
background        | string        | `#eee`                        | The chart background color
bandsPaddingInner | number        | `0.2`                         | Inner padding between rectangular bars to the specified value which must be in the range [0, 1]. [More](https://github.com/d3/d3-scale#band_paddingInner)
baseLine          | number        | `0`                           | The baseline of chart
chartClassName    | string        | `r3-barchart`                 | The class name of chart
color             | string \| array| `#009688`                    | If type a string is in a hex color, then it color will be filled for all the rectangles. If type array that which is map "color-value" then rectangles are filled in accordance with this map. More about [colorScale](../Others/colorScale.md)
height            | number        | `300`                         | The height of chart container
labels            | object        | `{color: '333',digitsAfterPoint:0,fontSize: '12px',disable: false}`| The bar labels settings
padding           | object        | `{bottom: 10,left: 10,right: 15,top: 20}`| The sizes of whitespace inside the svg container
paddingInner      | object        | `{bottom: 20,left: 20,right: 5,top: 10}`| The sizes of whitespace inside the bars container
width             | number        | `400`                         | The width of chart container
xAxis             | object        | [XAxisOptionsDefault](../Components/XAxis.md) | X-axis options object. [XAxisOptions](../Components/XAxis.md)
xAxis.className   | string        | `r3-barchart-xaxis`           | The class name of chart x-axis 
yAxis             | object        | [YAxisOptionsDefault](../Components/YAxis.md) | Y-axis options object. [YAxisOptions](../Components/YAxis.md)
yAxis.tickCount   | number        | `5`                           | The count of y-axis tick
yAxis.className   | string        | `r3-barchart-yaxis`           | The class name of chart y-axis