Reputation: 1389
I'm trying to set a custom color for the area chart in morris.js. I've used the lineColors
option but the area color below the line is some kind opaque. Setting the fillingOpacity
to 1 doesn't change anything.
Is there a way to properly set a custom color for the filling area below the drawn lines?
Upvotes: 2
Views: 10683
Reputation: 5832
Use the fillOpacity
property (not fillingOpacity
). Set a value between 0 and 1. If you set the property to 1, there's no transparency.
Morris.Area({
element: 'chart',
data: [
{ y: '2015-01', a: 1, b: 2 },
{ y: '2015-02', a: 2, b: 3 },
{ y: '2015-03', a: 2, b: 2 },
{ y: '2015-04', a: 1, b: 4 },
{ y: '2015-05', a: 2, b: 5 },
{ y: '2015-06', a: 3, b: 3 },
{ y: '2015-07', a: 1, b: 2 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Individual Score', 'Team Score'],
fillOpacity: 0.4,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors: ['#ffffff'],
pointStrokeColors: ['black'],
lineColors: ['red', 'blue'],
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>
<div id="chart"></div>
Upvotes: 9