如何在Morris.js中更改填充区域颜色

Question

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?

Answer 1

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>