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
.
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