# bar chart

bar chart is a component which displays data within a nicely formatted chart


## Requirements

* Install the component to your project

```bash
npm install @vendasta/fec-bar-chart [--save]
```

You may also need to do typings install to install the highcharts dependancy in tsconfig.json, but this should be handled when you build.

```bash
typings install
```

* Next, you will need to import your bar chart in whatever module you wish to use it in:

```javascript
import { BarChartModule } from '@vendasta/fec-bar-chart/bar-chart.module';
...
@NgModule({
    ...
    imports: [
        BarChartModule
    ]
})
```

## Usage
The above will provide the bare minimum to reach compilation. To use the bar chart, we must then include the va-bar-chart and pass in data.

```javascript
import {Component} from "@angular/core";

@Component({
    ...
    template: `
        <va-bar-chart [barChartData]="variableWithBarChartData"></va-bar-chart>
    `
})
...
```

The data is formatted as a list of data points:
```json
variableWithBarChartData: Object = [
    {
        name: 'Account Created',
        y: 50,
        color: '#7cadf2'
    },
    {
        name: 'Ready to Sell',
        y: 20,
        color: '#3c78d8'
    },
    {
        name: 'Team Rocket',
        y: 43,
        color: '#c1334e'
    }
];
```

For the full list of data that the component can accept, check out the [Highcharts documentation](http://api.highcharts.com/highcharts#series) which this component runs off of.