angular-billboard
TypeScript icon, indicating that this package has built-in type declarations

0.1.6 • Public • Published

angular-billboard

NPM Version

billboard.js for Angular.

Install

  1. Install via npm:

    npm install angular-billboard --save
  2. 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"
                ]
            }
        ]
    }

Usage

Module

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 {}

Component

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);
        }
    }

Template

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>

API

The API follows the billboard.js API

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i angular-billboard

Weekly Downloads

3

Version

0.1.6

License

MIT

Last publish

Collaborators

  • alexkysil