Style Guide for Open Social Blue

7.1.2 javascript.morrisjs.areachart Area Chart

Create an area chart using Morris.Area(options). Area charts take all the same options as line charts, and the following extras: behaveLikeLine.

Example

  
    var labelColor = jQuery('#morris-area-chart').css('color');
      Morris.Area({
        element: 'morris-area-chart',
        behaveLikeLine: true,
        data: [
          {x: '2017 Q1', y: 3, z: 3},
          {x: '2017 Q2', y: 2, z: 1},
          {x: '2017 Q3', y: 2, z: 4},
          {x: '2017 Q4', y: 3, z: 3}
        ],
        xkey: 'x',
        ykeys: ['y', 'z'],
        labels: ['Y', 'Z'],
        gridTextColor: labelColor,
        lineColors: jQuery('#morris-area-chart').data('colors').split(',')
      });

Markup: 06-libraries/morrisjs/morrisjs-areachart.twig

<pre class="language-html">
  <code class="language-markup">
    <div id="morris-area-chart" style="height: 200px" data-colors="#29abe2,#ffc142"></div>
  </code>
</pre>
<pre>
  <code class="language-javascript">
    var labelColor = jQuery('#morris-area-chart').css('color');
      Morris.Area({
        element: 'morris-area-chart',
        behaveLikeLine: true,
        data: [
          {x: '2017 Q1', y: 3, z: 3},
          {x: '2017 Q2', y: 2, z: 1},
          {x: '2017 Q3', y: 2, z: 4},
          {x: '2017 Q4', y: 3, z: 3}
        ],
        xkey: 'x',
        ykeys: ['y', 'z'],
        labels: ['Y', 'Z'],
        gridTextColor: labelColor,
        lineColors: jQuery('#morris-area-chart').data('colors').split(',')
      });
  </code>
</pre>

Source: 06-libraries/morrisjs/morrisjs.scss, line 52