Skip annotations outside chartArea (chartjs#378)

src/annotation.js

@@ -152,6 +152,7 @@ function updateElements(chart, state, options, mode) {
     }
     const opts = resolveAnnotationOptions(annotation.setContext(getContext(chart, el, annotation)));
     const properties = el.resolveElementProperties(chart, opts);
+    properties.skip = isNaN(properties.x) || isNaN(properties.y);
     properties.options = opts;
     animations.update(el, properties);
   }
@@ -204,7 +205,7 @@ function resyncElements(elements, annotations) {
 function draw(chart, caller) {
   const {ctx, chartArea} = chart;
   const state = chartStates.get(chart);
-  const elements = state.elements.filter(el => el.options.display);
+  const elements = state.elements.filter(el => !el.skip && el.options.display);
 
   clipArea(ctx, chartArea);
   elements.forEach(el => {

src/helpers.js

@@ -3,9 +3,17 @@ import {isFinite} from 'chart.js/helpers';
 const PI = Math.PI;
 const HALF_PI = PI / 2;
 
+function inArea(scale, pixel) {
+  const area = scale.chart.chartArea;
+  return scale.isHorizontal()
+    ? pixel >= area.left && pixel <= area.right
+    : pixel >= area.top && pixel <= area.bottom;
+}
+
 export function scaleValue(scale, value, fallback) {
   value = typeof value === 'number' ? value : scale.parse(value);
-  return isFinite(value) ? scale.getPixelForValue(value) : fallback;
+  value = isFinite(value) ? scale.getPixelForValue(value) : fallback;
+  return inArea(scale, value) ? value : fallback;
 }
 
 /**

test/fixtures/line/out-of-range.js

@@ -0,0 +1,40 @@
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      datasets: [{
+        data: [10, 20, 30, 0, 55],
+      }],
+      labels: ['A', 'B', 'C', 'D', 'E']
+    },
+    options: {
+      scales: {
+        x: {
+          min: 'C'
+        }
+      },
+      plugins: {
+        legend: false,
+        annotation: {
+          annotations: {
+            annotation1: {
+              type: 'line',
+              scaleID: 'x',
+              borderWidth: 3,
+              borderColor: 'black',
+              value: 'B',
+              label: {
+                backgroundColor: 'red',
+                content: 'shold not be drawn',
+                enabled: true
+              }
+            }
+          }
+        }
+      },
+    }
+  },
+  options: {
+    spriteText: true,
+  }
+};