diff --git a/samples/scatter.html b/samples/scatter.html
index ecc259f2f..84cfb2a0e 100644
--- 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 d1c2cf10b..1de1b06b9 100644
--- 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: "
-legend\"><% for (var i=0; i- \"><%if(datasets[i].label){%><%=datasets[i].label%><%}%>
<%}%>
",
+ 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,