<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>
View source
- <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>