7.1.3 javascript.morrisjs.barchart Bar Chart

Toggle example guides Toggle HTML markup

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

Usage statistics for Drupal core
Example
  
    
  
    var labelColor = jQuery('#morris-bar-chart').css('color');
    Morris.Bar({
      element: 'morris-bar-chart',
      data: [
        { y: '2012', 6: 257,790, 7: 517,920, 8: 0 },
        { y: '2013', 6: 234,696, 7: 732,660, 8: 0 },
        { y: '2014', 6: 172,186, 7: 964,016, 8: 0 },
        { y: '2015', 6: 124,448, 7: 1,127,621, 8: 44,335 },
        { y: '2016', 6: 86,839, 7: 994,627, 8: 116,559 }
      ],
      xkey: 'y',
      ykeys: ['6', '7', '8'],
      labels: ['Drupal 6', 'Drupal 7', Drupal, 8],
      gridTextColor: labelColor,
      barColors: jQuery('#morris-bar-chart').data('colors').split(',')
    });
  
Markup: 06-libraries/morrisjs/morrisjs-barchart.twig
<pre class="language-html">
  <code class="language-markup">
    <div id="morris-bar-chart" style="height: 200px" data-colors="#29abe2,#ffc142,#1ab394"></div>
  </code>
</pre>
<pre>
  <code class="language-javascript">
    var labelColor = jQuery('#morris-bar-chart').css('color');
    Morris.Bar({
      element: 'morris-bar-chart',
      data: [
        { y: '2012', 6: 257,790, 7: 517,920, 8: 0 },
        { y: '2013', 6: 234,696, 7: 732,660, 8: 0 },
        { y: '2014', 6: 172,186, 7: 964,016, 8: 0 },
        { y: '2015', 6: 124,448, 7: 1,127,621, 8: 44,335 },
        { y: '2016', 6: 86,839, 7: 994,627, 8: 116,559 }
      ],
      xkey: 'y',
      ykeys: ['6', '7', '8'],
      labels: ['Drupal 6', 'Drupal 7', Drupal, 8],
      gridTextColor: labelColor,
      barColors: jQuery('#morris-bar-chart').data('colors').split(',')
    });
  </code>
</pre>
Source: 06-libraries/morrisjs/morrisjs.scss, line 88