diff --git a/samples/pie.html b/samples/pie.html
new file mode 100644
index 000000000..91475d5d2
--- /dev/null
+++ b/samples/pie.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Pie Chart</title>
+    <script src="../node_modules/chart.js/dist/Chart.bundle.js"></script>
+    <script src="../chartjs-plugin-annotation.js"></script>
+    <script src="../node_modules/chart.js/samples/utils.js"></script>
+</head>
+
+<body>
+    <div id="canvas-holder" style="width:40%">
+        <canvas id="chart-area" />
+    </div>
+    <button id="randomizeData">Randomize Data</button>
+    <button id="addDataset">Add Dataset</button>
+    <button id="removeDataset">Remove Dataset</button>
+    <script>
+    var randomScalingFactor = function() {
+        return Math.round(Math.random() * 100);
+    };
+
+    var config = {
+        type: 'pie',
+        data: {
+            datasets: [{
+                data: [
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                ],
+                backgroundColor: [
+                    window.chartColors.red,
+                    window.chartColors.orange,
+                    window.chartColors.yellow,
+                    window.chartColors.green,
+                    window.chartColors.blue,
+                ],
+                label: 'Dataset 1'
+            }],
+            labels: [
+                "Red",
+                "Orange",
+                "Yellow",
+                "Green",
+                "Blue"
+            ]
+        },
+        options: {
+            responsive: true,
+            annotation: { // not supported, and should not display or error
+                drawTime: 'beforeDatasetsDraw',
+                events: ['dblclick'],
+                annotations: [{
+                    type: 'box',
+                    xScaleID: 'x-axis-1',
+                    yScaleID: 'y-axis-1',
+                    xMin: -120,
+                    xMax: 20,
+                    yMin: -120,
+                    yMax: 20,
+                    backgroundColor: 'rgba(101, 33, 171, 1.0)',
+                    borderColor: 'rgb(101, 33, 171)',
+                    borderWidth: 1,
+                    onDblclick: function(e) {
+                        console.log('Box', e.type, this);
+                    }
+                }]
+            }
+        }
+    };
+
+    window.onload = function() {
+        var ctx = document.getElementById("chart-area").getContext("2d");
+        window.myPie = new Chart(ctx, config);
+    };
+
+    document.getElementById('randomizeData').addEventListener('click', function() {
+        config.data.datasets.forEach(function(dataset) {
+            dataset.data = dataset.data.map(function() {
+                return randomScalingFactor();
+            });
+        });
+
+        window.myPie.update();
+    });
+
+    var colorNames = Object.keys(window.chartColors);
+    document.getElementById('addDataset').addEventListener('click', function() {
+        var newDataset = {
+            backgroundColor: [],
+            data: [],
+            label: 'New dataset ' + config.data.datasets.length,
+        };
+
+        for (var index = 0; index < config.data.labels.length; ++index) {
+            newDataset.data.push(randomScalingFactor());
+
+            var colorName = colorNames[index % colorNames.length];;
+            var newColor = window.chartColors[colorName];
+            newDataset.backgroundColor.push(newColor);
+        }
+
+        config.data.datasets.push(newDataset);
+        window.myPie.update();
+    });
+
+    document.getElementById('removeDataset').addEventListener('click', function() {
+        config.data.datasets.splice(0, 1);
+        window.myPie.update();
+    });
+    </script>
+</body>
+
+</html>
diff --git a/samples/polar-area.html b/samples/polar-area.html
new file mode 100644
index 000000000..9c5af90d1
--- /dev/null
+++ b/samples/polar-area.html
@@ -0,0 +1,137 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Polar Area Chart</title>
+    <script src="../node_modules/chart.js/dist/Chart.bundle.js"></script>
+    <script src="../chartjs-plugin-annotation.js"></script>
+    <script src="../node_modules/chart.js/samples/utils.js"></script>
+    <style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
+    </style>
+</head>
+
+<body>
+    <div id="canvas-holder" style="width:50%">
+        <canvas id="chart-area"></canvas>
+    </div>
+    <button id="randomizeData">Randomize Data</button>
+    <button id="addData">Add Data</button>
+    <button id="removeData">Remove Data</button>
+    <script>
+    var randomScalingFactor = function() {
+        return Math.round(Math.random() * 100);
+    };
+
+    var chartColors = window.chartColors;
+    var color = Chart.helpers.color;
+    var config = {
+        data: {
+            datasets: [{
+                data: [
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                ],
+                backgroundColor: [
+                    color(chartColors.red).alpha(0.5).rgbString(),
+                    color(chartColors.orange).alpha(0.5).rgbString(),
+                    color(chartColors.yellow).alpha(0.5).rgbString(),
+                    color(chartColors.green).alpha(0.5).rgbString(),
+                    color(chartColors.blue).alpha(0.5).rgbString(),
+                ],
+                label: 'My dataset' // for legend
+            }],
+            labels: [
+                "Red",
+                "Orange",
+                "Yellow",
+                "Green",
+                "Blue"
+            ]
+        },
+        options: {
+            responsive: true,
+            legend: {
+                position: 'right',
+            },
+            title: {
+                display: true,
+                text: 'Chart.js Polar Area Chart'
+            },
+            scale: {
+              ticks: {
+                beginAtZero: true
+              },
+              reverse: false
+            },
+            animation: {
+                animateRotate: false,
+                animateScale: true
+            },
+            annotation: { // not supported, and should not display or error
+                drawTime: 'beforeDatasetsDraw',
+                events: ['dblclick'],
+                annotations: [{
+                    type: 'box',
+                    xScaleID: 'x-axis-1',
+                    yScaleID: 'y-axis-1',
+                    xMin: -120,
+                    xMax: 20,
+                    yMin: -120,
+                    yMax: 20,
+                    backgroundColor: 'rgba(101, 33, 171, 1.0)',
+                    borderColor: 'rgb(101, 33, 171)',
+                    borderWidth: 1,
+                    onDblclick: function(e) {
+                        console.log('Box', e.type, this);
+                    }
+                }]
+            }
+        }
+    };
+
+    window.onload = function() {
+        var ctx = document.getElementById("chart-area");
+        window.myPolarArea = Chart.PolarArea(ctx, config);
+    };
+
+    document.getElementById('randomizeData').addEventListener('click', function() {
+        config.data.datasets.forEach(function(piece, i) {
+            piece.data.forEach(function(value, j) {
+                config.data.datasets[i].data[j] = randomScalingFactor();
+            });
+        });
+        window.myPolarArea.update();
+    });
+
+    var colorNames = Object.keys(window.chartColors);
+    document.getElementById('addData').addEventListener('click', function() {
+        if (config.data.datasets.length > 0) {
+            config.data.labels.push('data #' + config.data.labels.length);
+            config.data.datasets.forEach(function(dataset) {
+                var colorName = colorNames[config.data.labels.length % colorNames.length];
+                dataset.backgroundColor.push(window.chartColors[colorName]);
+                dataset.data.push(randomScalingFactor());
+            });
+            window.myPolarArea.update();
+        }
+    });
+    document.getElementById('removeData').addEventListener('click', function() {
+        config.data.labels.pop(); // remove the label first
+        config.data.datasets.forEach(function(dataset) {
+            dataset.backgroundColor.pop();
+            dataset.data.pop();
+        });
+        window.myPolarArea.update();
+    });
+    </script>
+</body>
+
+</html>
diff --git a/samples/radar.html b/samples/radar.html
new file mode 100644
index 000000000..b144e8b46
--- /dev/null
+++ b/samples/radar.html
@@ -0,0 +1,166 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Radar Chart</title>
+    <script src="../node_modules/chart.js/dist/Chart.bundle.js"></script>
+    <script src="../chartjs-plugin-annotation.js"></script>
+    <script src="../node_modules/chart.js/samples/utils.js"></script>
+    <style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
+    </style>
+</head>
+
+<body>
+    <div style="width:40%">
+        <canvas id="canvas"></canvas>
+    </div>
+    <button id="randomizeData">Randomize Data</button>
+    <button id="addDataset">Add Dataset</button>
+    <button id="removeDataset">Remove Dataset</button>
+    <button id="addData">Add Data</button>
+    <button id="removeData">Remove Data</button>
+    <script>
+    var randomScalingFactor = function() {
+        return Math.round(Math.random() * 100);
+    };
+
+    var color = Chart.helpers.color;
+    var config = {
+        type: 'radar',
+        data: {
+            labels: [["Eating", "Dinner"], ["Drinking", "Water"], "Sleeping", ["Designing", "Graphics"], "Coding", "Cycling", "Running"],
+            datasets: [{
+                label: "My First dataset",
+                backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
+                borderColor: window.chartColors.red,
+                pointBackgroundColor: window.chartColors.red,
+                data: [
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor()
+                ]
+            }, {
+                label: "My Second dataset",
+                backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
+                borderColor: window.chartColors.blue,
+                pointBackgroundColor: window.chartColors.blue,
+                data: [
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor()
+                ]
+            },]
+        },
+        options: {
+            legend: {
+                position: 'top',
+            },
+            title: {
+                display: true,
+                text: 'Chart.js Radar Chart'
+            },
+            scale: {
+                ticks: {
+                    beginAtZero: true
+                }
+            },
+            annotation: { // not supported, and should not display or error
+                drawTime: 'beforeDatasetsDraw',
+                events: ['dblclick'],
+                annotations: [{
+                    type: 'box',
+                    xScaleID: 'x-axis-0',
+                    yScaleID: 'y-axis-0',
+                    xMin: randomScalingFactor(),
+                    xMax: randomScalingFactor(),
+                    yMin: randomScalingFactor(),
+                    yMax: randomScalingFactor(),
+                    backgroundColor: 'rgba(101, 33, 171, 0.5)',
+                    borderColor: 'rgb(101, 33, 171)',
+                    borderWidth: 1,
+                    onDblclick: function(e) {
+                        console.log('Box', e.type, this);
+                    }
+                }]
+            }
+        }
+    };
+
+    window.onload = function() {
+        window.myRadar = new Chart(document.getElementById("canvas"), config);
+    };
+
+    document.getElementById('randomizeData').addEventListener('click', function() {
+        config.data.datasets.forEach(function(dataset) {
+            dataset.data = dataset.data.map(function() {
+                return randomScalingFactor();
+            });
+        });
+
+        window.myRadar.update();
+    });
+
+    var colorNames = Object.keys(window.chartColors);
+    document.getElementById('addDataset').addEventListener('click', function() {
+        var colorName = colorNames[config.data.datasets.length % colorNames.length];;
+        var newColor = window.chartColors[colorName];
+
+        var newDataset = {
+            label: 'Dataset ' + config.data.datasets.length,
+            borderColor: newColor,
+            backgroundColor: color(newColor).alpha(0.2).rgbString(),
+            pointBorderColor: newColor,
+            data: [],
+        };
+
+        for (var index = 0; index < config.data.labels.length; ++index) {
+            newDataset.data.push(randomScalingFactor());
+        }
+
+        config.data.datasets.push(newDataset);
+        window.myRadar.update();
+    });
+
+    document.getElementById('addData').addEventListener('click', function() {
+        if (config.data.datasets.length > 0) {
+            config.data.labels.push('dataset #' + config.data.labels.length);
+
+            config.data.datasets.forEach(function (dataset) {
+                dataset.data.push(randomScalingFactor());
+            });
+
+            window.myRadar.update();
+        }
+    });
+
+    document.getElementById('removeDataset').addEventListener('click', function() {
+        config.data.datasets.splice(0, 1);
+        window.myRadar.update();
+    });
+
+    document.getElementById('removeData').addEventListener('click', function() {
+        config.data.labels.pop(); // remove the label first
+
+        config.data.datasets.forEach(function(dataset) {
+            dataset.data.pop();
+        });
+
+        window.myRadar.update();
+    });
+    </script>
+</body>
+
+</html>
diff --git a/src/annotation.js b/src/annotation.js
index 8bad47459..287469446 100644
--- a/src/annotation.js
+++ b/src/annotation.js
@@ -22,7 +22,8 @@ module.exports = function(Chart) {
 				elements: {},
 				options: helpers.initConfig(chartOptions.annotation || {}),
 				onDestroy: [],
-				firstRun: true
+				firstRun: true,
+				supported: false
 			};
 
 			ns[ns.options.drawTime] = function(easingDecimal) {
@@ -34,6 +35,7 @@ module.exports = function(Chart) {
 			// Add the annotation scale adjuster to each scale's afterDataLimits hook
 			chartInstance.ensureScalesHaveIDs();
 			if (chartOptions.scales) {
+				ns.supported = true;
 				chartHelpers.each(chartOptions.scales.xAxes, setAfterDataLimitsHook);
 				chartHelpers.each(chartOptions.scales.yAxes, setAfterDataLimitsHook);
 			}
@@ -41,6 +43,10 @@ module.exports = function(Chart) {
 		beforeUpdate: function(chartInstance) {
 			var ns = chartInstance.annotation;
 
+			if (!ns.supported) {
+				return;
+			}
+
 			if (!ns.firstRun) {
 				ns.options = helpers.initConfig(chartInstance.options.annotation || {});
 			} else {
