Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

ng-morris-js

jboothe280ISC0.3.4

Super Easy AngularJS Chart directives for MorrisJS line, bar and donut charts!

Morris, MorrisJS, Morris, Charts, Angular, AngularJS, graphs, bar, chart, line, chart, donut, chart, data visualization

readme

ngMorrisJs logo

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.

showcase

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)']
  }
};

Change Log

Please see CHANGELOG.

Authors

Jeff Boothe (@dezeloper)

reurgency.com

Contributing

  1. Create an issue to discuss your idea
  2. Fork it
  3. Create your local feature branch (git checkout -b my-new-feature)
  4. Commit your changes (git commit -am 'Adding my new feature')
  5. Push to the branch (git push origin my-new-feature)
  6. Create a new Pull Request

Credits

Inspired by Connor Leech's ngMorris

License

Please see LICENSE

changelog