ng-chartist.js | Angular directive for Chartist.js

ng-chartist module


Stars : 10

Forks : 10

Created by Will

bower install ng-chartistjs

Download GitHub


Greenkeeper badge NPM version Downloads CircleCI

Angular 1.x directive for Chartist.js

Looking for the Angular version?



npm install angular-chartist.js chartist angular --save


Bower support has been dropped since version 4.0.0 but you can still use angular-chartist with Bower thanks to bower-npm-resolver.

First, add the resolver in your .bowerrc file:

  "resolvers": ["bower-npm-resolver"]


npm install -g bower-npm-resolver
bower install npm:angular-chartist.js chartist angular --save

For package managers other than npm, you can install via the git url:

For example, with Bower (if not using bower-npm-resolver):

bower install '<tag>' --save


Make sure you have loaded the necessary scripts in the correct order. Add angular-chartist as a module dependency, like so:

// >= 4.1
import angular from 'angular';
import angularChartist from 'angular-chartist.js';

angular.module('app', [angularChartist]);
// <= 4.0
import angular from 'angular';
import angularChartist from 'angular-chartist.js';

angular.module('app', []);

In your HTML, add the chartist directive to any div or make it a custom element:

<chartist class="ct-chart" chartist-data="chartist.barData" chartist-chart-type="Bar"></chartist>
Attribute Type Required
chartist-data Object Yes
chartist-chart-type String Yes
chartist-events* Object No
chartist-chart-options Object No
chartist-responsive-options Array No

Format for Chartist events:

  event: function eventHandler(obj) {
    // do stuff on event

For the sorts of values these options accept, check out the Chartist.js docs

Using Plugins

Simply put the plugins array in the options object.


$scope.chartOptions = {
  plugins: [
      textAnchor: 'middle'


This directive is simply a wrapper, anything you pass to the directive gets passed right through to the appropriate method on the Chartist side. Any issues with the charts, data, options, etc, should be filed against Chartist.js

Feel free to file an issue / PR if you feel that the directive can be improved in some way though.


Javascript plugin