Fork me on GitHub

Installation

Just install it via npm:

            
    npm install morris.js06

Your first chart

Start by adding a <div> to your page that will contain your chart. Make sure it has an ID so you can refer to it in your Javascript later.

            
    <div id="myfirstchart"></div>

And then add the following lines, if you want to import wth node: 

            
    // Either import with Node
    import { Morris } from 'morris.js06';

Or just include the filese: 

            
    // Or just include the files
    <script src='path_to/raphael.min.js'></script>
    <script src='path_to/morris.js'></script>

Then you can create your first chart: 

            	
    new Morris.Line({
      // ID of the element in which to draw the chart.
      element: 'myfirstchart',
      // Chart data records -- each entry in this array corresponds to a point on the chart.
      data: [
        { year: '2014', value: 20 },
        { year: '2015', value: 10 },
        { year: '2016', value: 5 },
        { year: '2017', value: 5 },
        { year: '2018', value: 20 }
      ],
      // The name of the data record attribute that contains x-values.
      xkey: 'year',
      // A list of names of data record attributes that contain y-values.
      ykeys: ['value'],
      // Labels for the ykeys -- will be displayed when you hover over the chart.
      labels: ['Value']
    }).on('click', (index, item) => {
      console.log(index, item);
    });

Assuming everything’s working correctly, you should see the following chart on your page:

What Next?

Check out the rest of the documentation: