Chart.js v2 stacked line opacity overlap

by Christian Bonato

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
<canvas id="myChart" width="600" height="350"></canvas>

JavaScript

var dataPack1 = [210, 220, 260, 350, 550, 550, 560, 590, 600, 610, 610, 620];
var dataPack2 = [100, 120, 130, 140, 160, 230, 270, 400, 410, 420, 430, 450];

var ctx = document.getElementById("myChart");

var data = {
  labels: ["May 1", "May 2", "May 3", "May 4", "May 5", "May 6", 
  				 "May 7", "May 8", "May 9", "May 10", "May 11", "May 12"],
  datasets: [
  	{
    	label: "Blue", 
      fill: true, 
      backgroundColor: "rgba(32, 162, 219, 0.9)", // <-- supposed to be light blue
      data: dataPack1,
    },
    {
    	label: "Red",
      fill: true,
      backgroundColor: "rgba(196, 93, 105, 0.9)",
      data: dataPack2,
    }
    ]
};

var options = {
  scales: {
    xAxes: [{
      stacked: true,
    }],
    yAxes: [{
      stacked: true,
    }]
  },
  legend: {
    display: false,
  },
  }
  
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options,
});