billboard.js for Angular.
-
Install via npm:
npm install angular-billboard --save
-
Import basic billboard.js styles. For example, directly in html:
<link rel="stylesheet" href="http://naver.github.io/billboard.js/release/latest/dist/billboard.min.css">
Or in .angular-cli.json if you use Angular CLI
{ "apps": [ { "styles": [ "../node_modules/billboard.js/dist/billboard.min.css" ] } ] }
Include the AngularBillboardModule
in your app root module.
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AngularBillboardModule } from 'angular-billboard';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AngularBillboardModule],
bootstrap: [AppComponent]
})
export class AppModule {}
Inject the AngularBillboardService
where you need it.
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { AngularBillboardService } from 'angular-billboard'
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
charts: any[];
chartsOptions: any[];
constructor(private angularBillboardService: AngularBillboardService) {}
ngOnInit() {
this.chartsOptions = [
{
data: {
type: 'bar',
columns: [
['data1', 30, 200, 100, 170, 150, 250],
['data2', 130, 100, 140, 35, 110, 50],
['data3', 10, 80, 240, 35, 11, 70]
]
},
title: {
text: 'Bar'
}
}
];
this.charts = this.angularBillboardService.generate(...this.chartsOptions);
}
}
Use <angular-billboard>
tag in template. The component needs a billboards.js chart object passed as the chart
argument.
<!-- app.component.html -->
<angular-billboard *ngFor="let chart of charts" [chart]="chart">
</angular-billboard>
The API follows the billboard.js API
MIT