README.md

Angular Chartist

Demo

https://willsoto.github.io/ng-chartist/demo/

Docs

https://willsoto.github.io/ng-chartist/docs/

Table of contents

• About
• Installation
• Documentation
• Development
• License

About

Chartist component for Angular 4+

Installation

yarn

# install ng-chartist and chartist
yarn add ng-chartist chartist

# install chartist typings
yarn add --dev @types/chartist

npm

# install ng-chartist and chartist
npm i --save ng-chartist chartist

# install chartist typings
npm i --save-dev @types/chartist

Add Chartist CSS styles to your application:

Add to styles section in angular.json file:

"styles": [
  "node_modules/chartist/dist/chartist.css",
  "src/style.scss"
],

Usage

// app.module.ts
import { ChartistModule } from 'ng-chartist';

@NgModule({
  imports: [
    ChartistModule // add ChartistModule to your imports
  ],
})
export class AppModule {}

// bar-chart.component.ts
import {IBarChartOptions, IChartistAnimationOptions, IChartistData} from 'chartist';
import {ChartEvent, ChartType} from 'ng-chartist';

@Component({
  selector: 'app-bar-chart',
  template: `
    <x-chartist
      [type]="type"
      [data]="data"
      [options]="options"
      [events]="events"
    ></x-chartist>
  `,
  styles: [`
    x-chartist {
      display: block;
      height: 300px;
    }
  `]
})
export class BarChartComponent {
    type: ChartType = 'Bar';
    data: IChartistData = {
        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]
        ]
    };
    
    options: IBarChartOptions = {
      axisX: {
        showGrid: false
      }
    };
    
    events: ChartEvent = {
      draw: (data) => {
        if (data.type === 'bar') {
          data.element.animate({
            y2: <IChartistAnimationOptions>{
              dur: '0.5s',
              from: data.y1,
              to: data.y2,
              easing: 'easeOutQuad'
            }
          });
        }
      }
    };
}

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

Documentation

All documentation is auto-generated from the source via typedoc and can be viewed here

Development

Prepare your environment

• Install Node.js and yarn
• Install local dev dependencies: yarn install while current directory is this repo

Development server

Run yarn run build:lib and then yarn start to start a development server.

Testing

Run yarn test to run tests.

License

Apache-2.0