angular-chart-jspanther

Installation

To install this library, run:

$ npm install angular-chart-jspanther --save

Dependency

$ npm install chart.js --save

or use cdn

$  https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js

for more information of installation and integration of chart.js, please refer installation and integration documentation

Consuming library

you can import library in any Angular application by running:

$ npm install angular-chart-jspanther

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// Import library
import { ChartModule } from 'angular-chart-jspanther';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify library as an import
    ChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once library is imported, you can use it in your component in your Angular application:

HTML

<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
<angular-chart-jspanther [type]="type" [height]="height" [width]="width" [data]="data" [options]="options"></angular-chart-jspanther>

TS/JS

<!-- You can now use your library component in app.component.ts -->
export class AppComponent implements OnInit {
  constructor(){
  
    this.type = 'bar'; // also try bar or other graph types
  
    this.height = '400px';
  
    this.width = '400px';
  
    this.data = {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    } 
    
  }

  this.options = {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
}

Parameters

| Name | Type | Default value | Description | |:--------------|:--------------|:--------------------|:----------------------------------------| | type | string | line | The type of chart we want to create for example bar,radar,pie etc docs
| height | string | 400px | Height of the chart in px | | width | string | 400px | Width of the chart in px | | data | object | - (random) | Please refer chart.js documentation | | options | object | - (random) | Please refer chart.js documentation |

for complete feature documentation please refer chart.js

Feature

• AOT(ahead of time)/JIT(just in time) compatible
• supports all major browsers
• support all latest angular version(version > 2)
• supports all feature of chart.js
• designed with simplicity in mind, yet is extremely customizable

License

MIT © jspanther