bar chart

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

Requirements

• Install the component to your project

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.

typings install

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

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.

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:

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 which this component runs off of.