Angular MorrisJS is an implementation of Morrisjs for angular 2+.

Install

---

                         	
npm install angular-morris-js --save
							
						

Angular Morris JS require these dependencies defined as peerDependencies:

• jQuery
• Raphael
• Morris.js

you'll need to install theses Dependencies:

                         	
npm install --save jquery raphael morris.js
							
						

Then include these scripts and style in your angular.json file

                         	
"styles": [
"./node_modules/morris.js/morris.css",
],
"scripts": [
"./node_modules/morris.js/morris.js",
],
							
						

After Installing, include MorrisJsModule in your ChartsModule class in chart.module.ts would look like this:

---

                         	
import { MorrisJsModule } from 'angular-morris-js';

@NgModule({
  imports: [
    ...,
    MorrisJsModule
  ],
})
export class ChartsModule { }

							
						

MorrisComponent class in morris.component.ts would look like this

---

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

declare const $: any;
declare const Morris: any;
@Component({
    selector: 'app-morris',
    templateUrl: './morris.component.html',
    styleUrls: ['./morris.component.scss']
})
export class MorrisComponent {                      	
  public chartBarOptions = {
        xkey: 'x',
        ykeys: ['y', 'z', 'a'],
        labels: ['Y', 'Z', 'A'],
        barColors: ['#01B8AA', '#F2C80F', '#5F6B6D'],
    };

    public chartBarData = [
        {
            x: '2011 Q1',
            y: 66,
            z: 54,
            a: 38
        }, {
            x: '2011 Q2',
            y: 98,
            z: 75,
            a: 45
        }, {
            x: '2011 Q3',
            y: 73,
            z: 52,
            a: 44
        }, {
            x: '2011 Q4',
            y: 82,
            z: 64,
            a: 43
        }
    ];
    constructor() { }
    }
							
						

morris.component.html would look like this

---

                         	
<div mk-morris-js [options]="chartBarOptions" [data]="chartBarData" type="Bar"></div>
							
						

Type	URL
angular-morris-js	https://mledour.github.io/angular-morris-js/branches/master/#/