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