Testing multiple series in Chart.js scatter plot

by jaap

HTML

<p style="max-width: 400px; padding: 10px;">
  <b>To reproduce:</b> Hover over the data point at <span class="code">x = 20</span>.  Notice that the tooltip shows data for both Series A and Series B (and both points are highlighted) even though Series B has no data at <span class="code">x = 20</span>.  The tooltip incorrectly includes the data point for Series B at <span class="code">x = 25</span>.  The same behavior happens when hovering over the point at <span class="code">x = 25</span>.  If one of the series is toggled off, however, all points work correctly.
</p>
<div id="container" ng-controller="LineCtrl">
  <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" chart-options="options"></canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/1.0.3/angular-chart.js"></script>

CSS

#container {
  width: 400px;
  height: 400px;
  position: relative;
}

.code {
  font-family: monospace;
}

JavaScript

angular.module("app", ["chart.js"]).controller("LineCtrl", function($scope) {

  $scope.series = ['Series A', 'Series B'];
  $scope.data = [
    [
    	{ x: 0, y: 5 }, 
     	{ x: 5, y: 15 }, 
     	{ x: 10, y: 20 }, 
     	{ x: 15, y: 5 }, 
     	{ x: 20, y: 5 },
      { x: 30, y: 20 }
    ],
    [
    	{ x: 0, y: 15 }, 
     	{ x: 5, y: 5 }, 
     	{ x: 10, y: 25 }, 
     	{ x: 15, y: 10 }, 
     	{ x: 25, y: 15 },
      { x: 30, y: 15 }
    ],
  ];
  $scope.options = {
    scales: {
      xAxes: [{
        type: 'linear',
        display: true,
        position: 'bottom'
      }]
    },
    legend: {
    	display: true
    }
  };
});

angular.bootstrap(document, ['app']);