[Chartjs]-Show wrong information in chart js 2

by

6👍

✅

The reason why the dataset named ‘Example 2’ is at 10 instead of 6 on the y-axis is because of how you have your line graph configured.

You have configured the y-axis to be stacked (stacked: true) so what you are really looking at is a stacked line chart. See the config below (which was taken directly from your question).

scales: {
  yAxes: [{
    stacked: true,
    ticks: {
      min: 0,
      stepSize: 5,
    }
  }]
}

Stacked line charts work by plotting each dataset right on top of the other. In this case the y value for that point is 6, so it is added to the y value of the previous dataset (which is 4) to plot the point at 10 on the y-axis.

To change this simply set stacked: false and both lines will be plotted as you were expecting. 

scales: {
  yAxes: [{
    stacked: false,
    ticks: {
      min: 0,
      stepSize: 5,
    }
  }]
}

See this codepen example.

0👍

data creation is causing problem. Check fiddle

var lables = [];
var s = [{
        example1 : {'01-Mar-17' : '0', '02-Mar-17' : '6'},
        example2 : {'01-Mar-17':'0', '02-Mar-17': '4'}
    }];
    var example1 = [];
    var example2 = [];
    $.each(s,function(i,item){
      $.each(item.example1,function(i,j){
             lables.push(i);
             example1.push(j);
      });
      $.each(item.example2,function(i,j){
           example2.push(j);
      });   
    });
    var ctx = document.getElementById('chartdata');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: lables,
        datasets: [{
            label: 'Example 1',
            fill: false,
            lineTension: 0.1,
            backgroundColor: '#00a3d0',
            borderColor: '#00a3d0',
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: '#00a3d0',
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: '#00a3d0',
            pointHoverBorderColor: '#00a3d0',
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: example1,
            spanGaps: false,
        }, {
            label: 'Example 2',
            fill: false,
            lineTension: 0.1,
            backgroundColor: '#8a6d3b',
            borderColor: '#8a6d3b',
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: '#8a6d3b',
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: '#8a6d3b',
            pointHoverBorderColor: '#8a6d3b',
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: example2,
            spanGaps: false,
        }
        ]
      },
      options: {
        responsive: true,
        scales: {
        yAxes: [{
            stacked: false,
            ticks: {
                min: 0,
                stepSize: 5,
            }
        }]
        }
    }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
<canvas id="chartdata" ></canvas>

Leave a comment