Ng-morris-js NPM

ng-morris-js

Super Easy AngularJS Chart Directives for MorrisJS Charts. ng-morris-js doesn't limit chart options - use ANY or ALL of Morris Chart's native Area, Line, Bar and Donut options.

Demo Site

Our Demo Site has many useful examples and usage tips.

Features

Super Easy to Use
Use Any/All MorrisJS Options
Inverse Axes Tips
Demos & Tutorials
Angular Best Practices

Installation

From terminal/command prompt, install the ng-morris-js package with bower or npm.

bower install ng-morris-js
// or
npm install ng-morris-js</div>

Include Script and CSS References

If npm install was used, substitute bower_components with node_modules in paths below.

<link rel="stylesheet" href="bower_components/morris.js/morris.css">
<!-- Include these .js references below angular scripts -->
<script src="bower_components/morris.js/morris.js"></script>
<script src="bower_components/ng-morris-js/dist/ng-morris-js.min.js"></script></div>

Add Module Reference

Add the ng-morris-js module reference along with others required by your app.

(function () {
  angular
    .module('app', [
      'ng-morris-js'
    ]);
}());

Usage HTML

Declare the directive and the two attributes, chart-options & chart-data.

<ng-morris-bar-chart
  chart-options="myCtrl.barChart.options"
  chart-data="homeCtrl.barChart.data">
</ng-morris-bar-chart></div>

Usage JS

Create an object in your Controller to store the chart options & data.

myCtrl.myBarChart = {
  data: [
    {year: '2015 Q1', sales: 3, net: 2, profit: 1},
    {year: '2015 Q2', sales: 2, net: 0.9, profit: 0.45},
    {year: '2015 Q3', sales: 1, net: 0.4, profit: 0.2},
    {year: '2015 Q4', sales: 2, net: 1, profit: 0.5}
  ],
  options: {
    xkey: 'year',
    ykeys: ['sales', 'net', 'profit'],
    labels: ['Sales', 'Net', 'Profit'],
    barColors: ['#777777', '#e74c3c', 'rgb(11, 98, 164)']
  }
};