Merge pull request #48 from niutski/master

#38: Fix drag zoom inaccuracy by offsetting X coordinates
chartjs · Oct 18, 2016 · 212782f · 212782f
2 parents a3abfe7 + 4db7b64
commit 212782f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/Chart.Zoom.js b/Chart.Zoom.js
@@ -324,8 +324,9 @@ var zoomPlugin = {
 					var chartArea = chartInstance.chartArea;
 					var yAxis = getYAxis(chartInstance);
 					var beginPoint = chartInstance._dragZoomStart;
-					var startX = Math.min(beginPoint.x, event.x) ;
-					var endX = Math.max(beginPoint.x, event.x);
+					var offsetX = beginPoint.target.getBoundingClientRect().left;
+					var startX = Math.min(beginPoint.x, event.x) - offsetX;
+					var endX = Math.max(beginPoint.x, event.x) - offsetX;
 					var dragDistance = endX - startX;
 					var chartDistance = chartArea.right - chartArea.left;
 					var zoom = 1 + ((chartDistance - dragDistance) / chartDistance );
@@ -429,8 +430,9 @@ var zoomPlugin = {
 			var yAxis = getYAxis(chartInstance);
 			var beginPoint = chartInstance._dragZoomStart;
 			var endPoint = chartInstance._dragZoomEnd;
-			var startX = Math.min(beginPoint.x, endPoint.x);
-			var endX = Math.max(beginPoint.x, endPoint.x);
+			var offsetX = beginPoint.target.getBoundingClientRect().left;
+			var startX = Math.min(beginPoint.x, endPoint.x) - offsetX;
+			var endX = Math.max(beginPoint.x, endPoint.x) - offsetX;
 			var rectWidth = endX - startX;
 
 

diff --git a/Chart.Zoom.min.js b/Chart.Zoom.min.js
diff --git a/src/chart.zoom.js b/src/chart.zoom.js
@@ -312,8 +312,9 @@ var zoomPlugin = {
 					var chartArea = chartInstance.chartArea;
 					var yAxis = getYAxis(chartInstance);
 					var beginPoint = chartInstance._dragZoomStart;
-					var startX = Math.min(beginPoint.x, event.x) ;
-					var endX = Math.max(beginPoint.x, event.x);
+					var offsetX = beginPoint.target.getBoundingClientRect().left;
+					var startX = Math.min(beginPoint.x, event.x) - offsetX;
+					var endX = Math.max(beginPoint.x, event.x) - offsetX;
 					var dragDistance = endX - startX;
 					var chartDistance = chartArea.right - chartArea.left;
 					var zoom = 1 + ((chartDistance - dragDistance) / chartDistance );
@@ -417,8 +418,9 @@ var zoomPlugin = {
 			var yAxis = getYAxis(chartInstance);
 			var beginPoint = chartInstance._dragZoomStart;
 			var endPoint = chartInstance._dragZoomEnd;
-			var startX = Math.min(beginPoint.x, endPoint.x);
-			var endX = Math.max(beginPoint.x, endPoint.x);
+			var offsetX = beginPoint.target.getBoundingClientRect().left;
+			var startX = Math.min(beginPoint.x, endPoint.x) - offsetX;
+			var endX = Math.max(beginPoint.x, endPoint.x) - offsetX;
 			var rectWidth = endX - startX;