CODEWITHSUNDEEP
javascriptmorris.js
kiwi1342
kiwi1342

Reputation: 1389

How to change the filling area color in Morris.js

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

Answers (1)

krlzlx
krlzlx

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

Related Questions