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.