From 95bd0a54dd2f4e3a0ec5601b2a359ec72408d48a Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sat, 2 Apr 2016 21:41:57 -0400 Subject: [PATCH] Clip out the chart area so that things outside do not draw --- src/core/core.controller.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/core/core.controller.js b/src/core/core.controller.js index fb635453f..64af936de 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -310,6 +310,12 @@ module.exports = function(Chart) { this.scale.draw(); } + // Clip out the chart area so that anything outside does not draw. This is necessary for zoom and pan to function + this.chart.ctx.save(); + this.chart.ctx.beginPath(); + this.chart.ctx.rect(this.chartArea.left, this.chartArea.top, this.chartArea.right - this.chartArea.left, this.chartArea.bottom - this.chartArea.top); + this.chart.ctx.clip(); + // Draw each dataset via its respective controller (reversed to support proper line stacking) helpers.each(this.data.datasets, function(dataset, datasetIndex) { if (helpers.isDatasetVisible(dataset)) { @@ -317,6 +323,9 @@ module.exports = function(Chart) { } }, null, true); + // Restore from the clipping operation + this.chart.ctx.restore(); + // Finally draw the tooltip this.tooltip.transition(easingDecimal).draw(); }, -- 2.47.3