Draw stacked chart using dygraph
<p>I want to draw a stacked chart using the <a href="http://dygraphs.com/" rel="nofollow noreferrer">dygraphs</a> JavaScript library, which I've done below. But I want a different color for each bar line. Two colors like bar top section in dark and bottom section in same light color, something like this:</p>

<p><a href="https://i.stack.imgur.com/UHddB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UHddB.png" alt="enter image description here"></a></p>

<p>Please suggest how I can pass a different color for dygraph.<br>
Here's what I have so far:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function barChartPlotter(e) {
  var ctx = e.drawingContext;
  var points = e.points;
  var y_bottom = e.dygraph.toDomYCoord(0); // see &lt;a href="http://dygraphs.com/jsdoc/symbols/Dygraph.html#toDomYCoord"&gt;jsdoc&lt;/a&gt;

  // This should really be based on the minimum gap
  var bar_width = 2 / 3 * (points[1].canvasx - points[0].canvasx);
  ctx.fillStyle = e.color; // a lighter shade might be more aesthetically pleasing

  // Do the actual plotting.
  for (var i = 0; i &lt; points.length; i++) {
    var p = points[i];
    var center_x = p.canvasx; // center of the bar

    ctx.fillRect(center_x - bar_width / 2, p.canvasy, bar_width, y_bottom - p.canvasy);
    ctx.strokeRect(center_x - bar_width / 2, p.canvasy, bar_width, y_bottom - p.canvasy);
  }
}

g = new Dygraph(document.getElementById("graph"),
  "X,Y\n" +
  "1,2\n" +
  "2,4\n" +
  "3,6\n" +
  "4,8\n" +
  "5,10\n" +
  "6,12\n" +
  "7,14\n" +
  "8,16\n", {
    // options go here. See http://dygraphs.com/options.html
    legend: 'always',
    animatedZooms: true,
    plotter: barChartPlotter,
    dateWindow: [0, 9]
  });</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/*
Relevant CSS classes include:

Labels on the X &amp; Y axes:
.dygraph-axis-label
.dygraph-axis-label-x
.dygraph-axis-label-y
.dygraph-axis-label-y2

Chart labels, see http://dygraphs.com/tests/styled-chart-labels.html
.dygraph-title
.dygraph-xlabel
.dygraph-ylabel
.dygraph-y2label

The legend, see http://dygraphs.com/tests/series-highlight.html
.dygraph-legend
*/

.dygraph-title {
  color: gray;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/mootools/1.4.5/mootools-core-full-compat.min.js"&gt;&lt;/script&gt;
&lt;script src="//dygraphs.com/dygraph-dev.js"&gt;&lt;/script&gt;
&lt;!-- You may set style: "width: ...; height: ..." to size the chart --&gt;
&lt;div id="graph"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://jsfiddle.net/eM2Mg/132/" rel="nofollow noreferrer">View on JSFiddle</a></p>