diff --git a/README.md b/README.md
index e894493..9552a98 100644
--- a/README.md
+++ b/README.md
@@ -76,6 +76,7 @@ new Chartist.Bar('.ct-chart', data, {
 | `className` | Adds a class to the `ul` element. | `string` | `''` |
 | `clickable` | Sets the legends clickable state; setting this value to `false` disables toggling graphs on legend click. | `bool` | `true` |
 | `legendNames` | Sets custom legend names. By default the `name` property of the series will be used if none are given. Multiple series can be associated with a legend item using this property as well. See examples for more details. | `mixed` | `false` |
+| `useHtml` | Allows HTML in legends, useful when used alongside legendNames. | `boolean` | `false` |
 | `onClick` | Accepts a function that gets invoked if `clickable` is true. The function has the `chart`, and the click event (`e`), as arguments. | `mixed` | `false` |
 | `classNames` | Accepts a array of strings as long as the chart's series, those will be added as classes to the `li` elements. | `mixed` | `false` |
 | `removeAll` | Allow all series to be removed at once. | `bool` | `false` |
diff --git a/chartist-plugin-legend.js b/chartist-plugin-legend.js
index a8dc67b..18f3ca4 100644
--- a/chartist-plugin-legend.js
+++ b/chartist-plugin-legend.js
@@ -24,6 +24,7 @@
         classNames: false,
         removeAll: false,
         legendNames: false,
+        useHtml: false,
         clickable: true,
         onClick: null,
         position: 'top'
@@ -118,7 +119,11 @@
                     li.classList.add(options.classNames[i]);
                 }
                 li.setAttribute('data-legend', i);
-                li.textContent = legendText;
+                if (options.useHtml) {
+                    li.innerHTML = legendText;
+                } else {
+                    li.textContent = legendText;
+                }
                 return li;
             }
 
diff --git a/test/test.legend.js b/test/test.legend.js
index 7a56158..a7f569b 100644
--- a/test/test.legend.js
+++ b/test/test.legend.js
@@ -206,6 +206,30 @@ describe('Chartist plugin legend', function() {
             });
         });
 
+        it('should use custom HTML legend names if provided', function(done) {
+            var legendNames = ['Sheep <span>Big</span>', '<div class="some-class">are</div>', 'animals'];
+            chart = generateChart('Line', chartDataLine, { legendNames: legendNames, useHtml: true });
+
+            // Set a delay on the test to ensure it doesn't overlap with the plugin native 'created' handler
+            chart.on('created', function () {
+               setTimeout(function () {
+                  var legendKey = 0;
+                  var parent = chart.container.querySelector('ul.ct-legend');
+
+                  expect(parent.childNodes.length).to.equal(3);
+                  [].forEach.call(parent.childNodes, function (item)
+                  {
+                     expect(item.innerHTML).to.equal(legendNames[legendKey]);
+                     legendKey += 1;
+                  });
+
+                  destroyChart();
+                  done();
+
+               }, 10)
+            });
+        });
+
         it('should use the data object name when labels are not defined', function (done) {
             var chartDataNoLabels = {
                 labels: [], // adding empty arry because chartist.js converts null or undefined labels into empty array
@@ -435,14 +459,14 @@ describe('Chartist plugin legend', function() {
 
                 click(seriesB);
                 expect(chart.legendClicked).to.equal(true);
-                
+
                 //Clicking on an inactive series should also call the function.
                 chart.legendClicked = false;
                 click(seriesB);
                 expect(chart.legendClicked).to.equal(true);
             });
         });
-        
+
         describe('clickable with multiple series per legend item', function() {
             before(function(done) {
                 chart = generateChart('Line', chartDataLine, {
@@ -490,7 +514,7 @@ describe('Chartist plugin legend', function() {
                 expect(svgSeries2[0].className.baseVal).to.contain('ct-series-a');
                 expect(svgSeries2[1].className.baseVal).to.contain('ct-series-b');
                 expect(svgSeries2[2].className.baseVal).to.contain('ct-series-c');
-                
+
                 // Clicking on the first legend item should hide the two first series:
                 click(seriesA);
                 expect(chart.data.series.length).to.equal(1);
@@ -549,14 +573,14 @@ describe('Chartist plugin legend', function() {
 
                 click(seriesB);
                 expect(chart.legendClicked).to.equal(true);
-                
+
                 //Clicking on an inactive series should also call the function.
                 chart.legendClicked = false;
                 click(seriesB);
                 expect(chart.legendClicked).to.equal(true);
             });
         });
-        
+
         describe('clickable for a pie', function() {
             before(function(done) {
                 chart = generateChart('Pie', chartDataPie, {