[Chartjs]-How to display stacked line chartjs

by

1👍

From your code I presume you’re using an old version of chart.js. 

new Chart(ctx).Line(data, {
  ...

Charts are now created in a different way.

var myChart = new Chart(ctx, {
    type: 'line',
    ...

If you switch to version 2.9.3., it works fine as the following code sample illustrates.

new Chart(document.getElementById('myChartAxis'), {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [
      {
        label: 'WARNINGS',
          data: [1, 2, 3, 2],
          borderColor: 'rgb(255, 159, 64)',
          backgroundColor: 'rgba(255, 159, 64, 0.2)'
      },
      {
        label: 'ERRORS',
          data: [1, 2, 1, 3],
          borderColor: 'rgb(255, 99, 132)',
          backgroundColor: 'rgba(255, 99, 132, 0.2)'
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        stacked: true
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChartAxis" height="90"></canvas>

Leave a comment