Angular2 Chartist

Demo

https://paradox41.github.io/angular2-chartist/demo/

Table of contents

• About
• Installation
• Documentation
• Development
• License

About

Chartist component for Angular 2

Installation

Install through npm:

npm install @angular/core angular2-chartist chartist --save

Additionally typings for the chartist library need to be installed:

• For TSC <= 1.8:

npm install -g typings --save

typings install -g dt~chartist --save

• For TSC = 2.0+ typings can be installed through npm directly:

npm install @types/chartist --save-dev

Then use it in your app like so:

As a component

import {
  Component
} from '@angular/core';

import {
  ChartistComponent,
  ChartType
} from 'angular2-chartist';

@Component({
  selector: 'my-element',
  directives: [ChartistComponent],
  template: `
    <x-chartist
      [data]="data"
      [type]="type">
    </x-chartist>
  `
})
export class MyElementComponent {
  type: ChartType;
  data: any;

  constructor() {
    this.type = 'Bar';
    this.data = {
      "labels": [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ],
      "series": [
        [5, 4, 3, 7, 5, 10 ,3, 4, 8, 10 ,6, 8],
        [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
      ]
    }
  }
}

As a module

import {
  NgModule
} from '@angular/core';

import {
  ChartistModule
} from 'angular2-chartist';

import {
  MyAppComponent
} from './my-app';

@NgModule({
  imports: [
    ChartistModule,
  ],
  bootstrap: [MyAppComponent]
})
export class AppModule { }

You may also find it useful to view the demo source.

Usage without a module bundler

<script src="node_modules/angular2-chartist/dist/angular2-chartist.js"></script>
<script>
    // everything is exported angular2Chartist namespace
</script>

Documentation

All documentation is auto-generated from the source via typedoc and can be viewed here: https://paradox41.github.io/angular2-chartist/docs/

Development

Prepare your environment

• Install Node.js and NPM (should come with)
• Install local dev dependencies: npm install while current directory is this repo

Development server

Run npm start to start a development server on port 8080 with auto reload + tests.

Testing

Run npm test to run tests once or npm run test:watch to continually run tests.

Release

• Bump the version in package.json (once the module hits 1.0 this will become automatic)

npm run release

License

Apache-2.0