diff --git a/samples/bar.html b/samples/bar.html
index 1d085208e..eb8796ac5 100644
--- a/samples/bar.html
+++ b/samples/bar.html
@@ -16,6 +16,12 @@
     <button id="removeDataset">Remove Dataset</button>
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
+    <div>
+        <h3>Legend</h3>
+        <div id="legendContainer">
+            
+        </div>
+    </div>
     <script>
     var randomScalingFactor = function() {
         return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
@@ -44,6 +50,13 @@
         }]
 
     };
+
+    function updateLegend() {
+        $legendContainer = $('#legendContainer');
+        $legendContainer.empty();
+        $legendContainer.append(window.myBar.generateLegend());
+    }
+
     window.onload = function() {
         var ctx = document.getElementById("canvas").getContext("2d");
         window.myBar = new Chart(ctx, {
@@ -53,6 +66,8 @@
                 responsive: true,
             }
         });
+
+        updateLegend();
     };
 
     $('#randomizeData').click(function() {
@@ -65,6 +80,7 @@
 
         });
         window.myBar.update();
+        updateLegend();
     });
 
     $('#addDataset').click(function() {
@@ -79,6 +95,7 @@
         }
 
         window.myBar.addDataset(newDataset, 1);
+        updateLegend();
     });
 
     $('#addData').click(function() {
@@ -88,11 +105,14 @@
             for (var index = 0; index < barChartData.datasets.length; ++index) {
                 window.myBar.addData(randomScalingFactor(), index);
             }
+
+            updateLegend();
         }
     });
 
     $('#removeDataset').click(function() {
         window.myBar.removeDataset(0);
+        updateLegend();
     });
 
     $('#removeData').click(function() {
@@ -101,6 +121,7 @@
         barChartData.datasets.forEach(function(dataset, datasetIndex) {
             window.myBar.removeData(datasetIndex, -1);
         });
+        updateLegend();
     });
     </script>
 </body>
diff --git a/samples/line.html b/samples/line.html
index edcca91ec..28171cdea 100644
--- a/samples/line.html
+++ b/samples/line.html
@@ -23,6 +23,12 @@
     <button id="removeDataset">Remove Dataset</button>
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
+    <div>
+        <h3>Legend</h3>
+        <div id="legendContainer">
+            
+        </div>
+    </div>
     <script>
     var randomScalingFactor = function() {
         return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
@@ -74,8 +80,16 @@
     window.onload = function() {
         var ctx = document.getElementById("canvas").getContext("2d");
         window.myLine = new Chart(ctx, config);
+
+        updateLegend();
     };
 
+    function updateLegend() {
+        $legendContainer = $('#legendContainer');
+        $legendContainer.empty();
+        $legendContainer.append(window.myLine.generateLegend());
+    }
+
     $('#randomizeData').click(function() {
         $.each(config.data.datasets, function(i, dataset) {
             dataset.data = dataset.data.map(function() {
@@ -85,6 +99,7 @@
         });
 
         window.myLine.update();
+        updateLegend();
     });
 
     $('#addDataset').click(function() {
@@ -103,6 +118,7 @@
         }
 
         window.myLine.addDataset(newDataset);
+        updateLegend();
     });
 
     $('#addData').click(function() {
@@ -112,11 +128,14 @@
             for (var index = 0; index < config.data.datasets.length; ++index) {
                 window.myLine.addData(randomScalingFactor(), index);
             }
+
+            updateLegend();
         }
     });
 
     $('#removeDataset').click(function() {
         window.myLine.removeDataset(0);
+        updateLegend();
     });
 
     $('#removeData').click(function() {
@@ -125,6 +144,8 @@
         config.data.datasets.forEach(function(dataset, datasetIndex) {
             window.myLine.removeData(datasetIndex, -1);
         });
+
+        updateLegend();
     });
     </script>
 </body>
diff --git a/samples/radar.html b/samples/radar.html
index 0605c76e7..b84b84583 100644
--- a/samples/radar.html
+++ b/samples/radar.html
@@ -16,6 +16,12 @@
     <button id="removeDataset">Remove Dataset</button>
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
+    ]<div>
+        <h3>Legend</h3>
+        <div id="legendContainer">
+            
+        </div>
+    </div>
     <script>
     var randomScalingFactor = function() {
         return Math.round(Math.random() * 100);
@@ -47,8 +53,15 @@
         }
     };
 
+    function updateLegend() {
+        $legendContainer = $('#legendContainer');
+        $legendContainer.empty();
+        $legendContainer.append(window.myRadar.generateLegend());
+    }
+
     window.onload = function() {
         window.myRadar = new Chart(document.getElementById("canvas"), config);
+        updateLegend();
     };
 
     $('#randomizeData').click(function() {
@@ -60,6 +73,7 @@
         });
 
         window.myRadar.update();
+        updateLegend();
     });
 
     $('#addDataset').click(function() {
@@ -78,6 +92,7 @@
         }
 
         window.myRadar.addDataset(newDataset);
+        updateLegend();
     });
 
     $('#addData').click(function() {
@@ -87,11 +102,14 @@
             for (var index = 0; index < config.data.datasets.length; ++index) {
                 window.myRadar.addData(randomScalingFactor(), index);
             }
+
+            updateLegend();
         }
     });
 
     $('#removeDataset').click(function() {
         window.myRadar.removeDataset(0);
+        updateLegend();
     });
 
     $('#removeData').click(function() {
@@ -100,6 +118,8 @@
         config.data.datasets.forEach(function(dataset, datasetIndex) {
             window.myRadar.removeData(datasetIndex, -1);
         });
+
+        updateLegend();
     });
     </script>
 </body>
diff --git a/src/charts/Chart.Scatter.js b/src/charts/Chart.Scatter.js
index 3c784ff32..8863ed5e6 100644
--- a/src/charts/Chart.Scatter.js
+++ b/src/charts/Chart.Scatter.js
@@ -23,9 +23,6 @@
 			}],
 		},
 
-		//String - A legend template
-		legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].borderColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
-
 		tooltips: {
 			template: "(<%= value.x %>, <%= value.y %>)",
 			multiTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%>(<%= value.x %>, <%= value.y %>)",
diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index c7e29dcd3..bd843631b 100644
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -338,7 +338,7 @@
 		},
 
 		generateLegend: function generateLegend() {
-			return template(this.options.legendTemplate, this);
+			return helpers.template(this.options.legendTemplate, this);
 		},
 
 		destroy: function destroy() {
diff --git a/src/core/core.js b/src/core/core.js
index 85a991671..42c214e14 100755
--- a/src/core/core.js
+++ b/src/core/core.js
@@ -83,8 +83,10 @@
 			defaultColor: 'rgba(0,0,0,0.1)',
 
 			// Element defaults defined in element extensions
-			elements: {}
+			elements: {},
 
+			// Legend template string
+			legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i = 0; i < data.datasets.length; i++){%><li><span style=\"background-color:<%=data.datasets[i].backgroundColor%>\"><%if(data.datasets[i].label){%><%=data.datasets[i].label%><%}%></span></li><%}%></ul>",
 		},
 	};