Set new tooltip templates for the scatter chart

diff --git a/samples/scatter.html b/samples/scatter.html
index ecc259f2faf39f17711487926f49d953fc0ae7ca..84cfb2a0e6c4a21f6e6cb6c12c3c636d1f5b9b5f 100644 (file)
--- a/samples/scatter.html
+++ b/samples/scatter.html
@@ -88,7 +88,7 @@
         var ctx = document.getElementById("canvas").getContext("2d");
         window.myScatter = new Chart(ctx).Scatter(scatterChartData, {
             responsive: true,
-            hoverMode: 'single',
+            hoverMode: 'single', // should always use single for a scatter chart
             scales: {
                xAxes: [{
                        gridLines: {

diff --git a/src/Chart.Scatter.js b/src/Chart.Scatter.js
index d1c2cf10b5e22035afa05a12dba7e2eeffb4e9c8..1de1b06b9403beb8dfcb6407d02d095328e46848 100644 (file)
--- a/src/Chart.Scatter.js
+++ b/src/Chart.Scatter.js
@@ -6,7 +6,7 @@
         helpers = Chart.helpers;
 
     var defaultConfig = {
-
+        hoverMode: 'single',
         scales: {
             xAxes: [{
                 scaleType: "linear", // scatter should not use a dataset axis
@@ -94,6 +94,9 @@
         //String - A legend template
         legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].borderColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
 
+        tooltipTemplate: "(<%= dataX %>, <%= dataY %>)",
+        multiTooltipTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%>(<%= dataX %>, <%= dataY %>)",
+
     };
 
 
@@ -334,8 +337,10 @@
                 helpers.extend(point, {
                     x: xScale.getPixelForValue(this.data.datasets[datasetIndex].data[index].x),
                     y: yScale.getPixelForValue(this.data.datasets[datasetIndex].data[index].y),
-                    value: this.data.datasets[datasetIndex].data[index].y,
-                    label: this.data.datasets[datasetIndex].data[index].x,
+                    dataX: this.data.datasets[datasetIndex].data[index].x,
+                    dataY: this.data.datasets[datasetIndex].data[index].y,
+                    label: '', // so that the multitooltip looks ok
+                    value: this.data.datasets[datasetIndex].data[index].y, // for legacy reasons
                     datasetLabel: this.data.datasets[datasetIndex].label,
                     // Appearance
                     hoverBackgroundColor: this.data.datasets[datasetIndex].pointHoverBackgroundColor || this.options.pointHoverBackgroundColor,