Pass the id of the DOM element rather than the element itself

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 coverage/
+.idea/

README.md

@@ -55,6 +55,34 @@ As styles are very different with each project, no CSS is included. You can copy
 }
 ```
 
+If you are using this within a Vue.js component, you need to wrap it in a `<style lang='scss'>` tag.
+Don't forget to import or define the `$ct-series-colors` variable:
+
+
+```scss
+<style lang='scss'>
+  $ct-series-colors: (
+          #d70206,
+          #f05b4f,
+          #f4c63d,
+          #d17905,
+          #453d3f,
+          #59922b,
+          #0544d3,
+          #6b0392,
+          #f05b4f,
+          #dda458,
+          #eacf7d,
+          #86797d,
+          #b2c326,
+          #6188e2,
+          #a748ca
+  ) !default;
+  // Your scss code here
+</style>
+```
+
+
 ## Usage
 
 In an example chart:
@@ -68,7 +96,7 @@ new Chartist.Bar('.ct-chart', data, {
             Chartist.plugins.legend()
         ]
     },
-});
+)
 ```
 
 | __Option__ | __Description__ | __Type__ | __Default__ |
@@ -79,4 +107,4 @@ new Chartist.Bar('.ct-chart', data, {
 | `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` |
-| `position` | Sets the position of the legend element. `top`, `bottom` or any DOM2 Element are currently accepted. If a DOM Element is given, the legend will be appended as it's last child. | `'top'|'bottom'|HTMLElement` | `'top'` |
+| `position` | Sets the position of the legend element. `top`, `bottom` or the `id` of any DOM2 Element are currently accepted. If a DOM Element is given, the legend will be appended as it's last child. | `string` | `'top'` |

chartist-plugin-legend.js

@@ -33,26 +33,15 @@
 
     Chartist.plugins.legend = function (options) {
 
-        // Catch invalid options
+        // Catch invalid options - position must be a string
         if (options && options.position) {
-            if (!(options.position === 'top' || options.position === 'bottom' || options.position instanceof HTMLElement)) {
+            if (!(typeof options.position === 'string')) {
                 throw Error('The position you entered is not a valid position');
             }
-            if (options.position instanceof HTMLElement) {
-                // Detatch DOM element from options object, because Chartist.extend
-                // currently chokes on circular references present in HTMLElements
-                var cachedDOMPosition = options.position;
-                delete options.position;
-            }
         }
 
         options = Chartist.extend({}, defaultOptions, options);
 
-        if (cachedDOMPosition) {
-            // Reattatch the DOM Element position if it was removed before
-            options.position = cachedDOMPosition
-        }
-
         return function legend(chart) {
 
             function removeLegendElement() {
@@ -124,19 +113,25 @@
 
             // Append the legend element to the DOM
             function appendLegendToDOM(legendElement) {
-                if (!(options.position instanceof HTMLElement)) {
-                    switch (options.position) {
-                        case 'top':
-                            chart.container.insertBefore(legendElement, chart.container.childNodes[0]);
-                            break;
-
-                        case 'bottom':
-                            chart.container.insertBefore(legendElement, null);
-                            break;
-                    }
-                } else {
-                    // Appends the legend element as the last child of a given HTMLElement
-                    options.position.insertBefore(legendElement, null);
+                // If you named your div 'top' or 'bottom', it won't be attached
+                switch (options.position) {
+                    case 'top':
+                        chart.container.insertBefore(legendElement, chart.container.childNodes[0]);
+                        break;
+
+                    case 'bottom':
+                        chart.container.insertBefore(legendElement, null);
+                        break;
+
+                    default:
+                        var pos = document.getElementById(options.position)
+                        if (pos !== null) {
+                            // Appends the legend element as the last child of a given HTMLElement
+                            pos.insertBefore(legendElement, null);
+                        } else {
+                            throw Error('The position you entered is not a valid position');
+                        }
+                        break;
                 }
             }
 
@@ -157,9 +152,11 @@
                         legend.active = false;
                         li.classList.add('inactive');
 
-                        var activeCount = legends.filter(function(legend) { return legend.active; }).length;
-                        if (!options.removeAll && activeCount == 0) {
-                            // If we can't disable all series at the same time, let's
+                        var activeCount = legends.filter(function (legend) {
+                            return legend.active;
+                        }).length;
+                        if (!options.removeAll && activeCount === 0) {
+                            // If we can't disable all series at the same time, var's
                             // reenable all of them:
                             for (var i = 0; i < legends.length; i++) {
                                 legends[i].active = true;
@@ -172,7 +169,7 @@
                     var newLabels = [];
 
                     for (var i = 0; i < seriesMetadata.length; i++) {
-                        if (seriesMetadata[i].legend != -1 && legends[seriesMetadata[i].legend].active) {
+                        if (seriesMetadata[i].legend !== -1 && legends[seriesMetadata[i].legend].active) {
                             newSeries.push(seriesMetadata[i].data);
                             newLabels.push(seriesMetadata[i].label);
                         }
@@ -221,7 +218,7 @@
                 });
             });
 
-            chart.on('created', function (data) {
+            chart.on('created', function () {
                 appendLegendToDOM(legendElement);
             });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartist-plugin-legend",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "author": "Kees Kluskens <kees@codeyellow.nl>",
   "description": "Legend plugin for Chartist.js.",
   "license": "ISC",