Show wrong information in chart js 2

Question

i'm try to display example1 and example2 data using chartjs 2.when i create chart its work good and displayed graph. but when i hover on graph point its show correct information but graph is show wrong information.

its show like this

in above screenshot y-Axes show me 10 but point hover show 6 how to solve this problem?

this is code

var lables = [];
    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.example1,function(i,j){
        lables.push(i);
        example1.push(j);
    });
    $.each(s.example2,function(i,k){
        example2.push(k);
    });
    var ctx = document.getElementById('chartdata').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: lables,
        datasets: [{
            label: 'Example 1',
            fill: false,
            lineTension: 0.1,
            backgroundColor: convertHex('#00a3d0',40),
            borderColor: convertHex('#00a3d0',80),
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: convertHex('#00a3d0',90),
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: convertHex('#00a3d0',100),
            pointHoverBorderColor: convertHex('#00a3d0',100),
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: example1,
            spanGaps: false,
        }, {
            label: 'Example 2',
            fill: false,
            lineTension: 0.1,
            backgroundColor: convertHex('#8a6d3b',40),
            borderColor: convertHex('#8a6d3b',80),
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: convertHex('#8a6d3b',90),
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: convertHex('#8a6d3b',100),
            pointHoverBorderColor: convertHex('#8a6d3b',100),
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: example2,
            spanGaps: false,
        }
        ]
      },
      options: {
        responsive: true,
        scales: {
        yAxes: [{
            stacked: true,
            ticks: {
                min: 0,
                stepSize: 5,
            }
        }]
        }
    }
    });

Answer 1

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>

Answer 2

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.