# @vendasta/fec-bar-chart

> Bar chart component using high charts

Latest version **1.0.0** (published 2016-10-24) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @vendasta/fec-bar-chart
pnpm add @vendasta/fec-bar-chart
yarn add @vendasta/fec-bar-chart
bun add @vendasta/fec-bar-chart
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2016-10-24 |
| First published | 2016-07-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | vendasta r&d |
| Maintainers | vendasta |
| Keywords | chart |

## Links

- npm: https://www.npmjs.com/package/@vendasta/fec-bar-chart
- npm.io page: https://npm.io/package/@vendasta/fec-bar-chart

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2016-10-24
- 0.0.5 — 2016-07-13
- 0.0.4 — 2016-07-11
- 0.0.3 — 2016-07-07
- 0.0.2 — 2016-07-07
- 0.0.1 — 2016-07-07

## README

# 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.

---
_Source: https://npm.io/package/@vendasta/fec-bar-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._