Dynamic positioning

README.md

@@ -79,4 +79,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`and `bottom`are currently accepted. | `'top'|'bottom'` | `'top'` |
+| `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'` |

chartist-plugin-legend.js

@@ -39,13 +39,23 @@
 
         // Catch invalid options
         if (options && options.position) {
-           if (!(options.position === 'top' || options.position === 'bottom')) {
+           if (!(options.position === 'top' || options.position === 'bottom' || options.position instanceof HTMLElement)) {
               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) {
             var existingLegendElement = chart.container.querySelector('.ct-legend');
             if (existingLegendElement) {
@@ -109,14 +119,21 @@
 
             chart.on('created', function (data) {
                // Append the legend element to the DOM
-               switch (options.position) {
-                  case 'top':
-                     chart.container.insertBefore(legendElement, chart.container.childNodes[0]);
-                     break;
-
-                  case 'bottom':
-                     chart.container.insertBefore(legendElement, null);
-                     break;
+               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);
                }
             });
 

test/test.legend.js

@@ -269,6 +269,26 @@ describe('Chartist plugin legend', function() {
                  }, 10)
               });
            });
+
+           it('should allow positioning to any DOM2 element', function (done) {
+              var testDOMElement = document.createElement('div');
+              document.body.insertBefore(testDOMElement , null);
+
+              chart = generateChart('Line', chartDataLine, { position: testDOMElement });
+
+              // Set a delay on the test to ensure it doesn't overlap with the plugin native 'created' handler
+              chart.on('created', function () {
+                 setTimeout(function () {
+                    expect(testDOMElement.childNodes.length).to.equal(1);
+                    var listElement = testDOMElement.querySelector("ul");
+                    expect(testDOMElement.childNodes[0]).to.equal(listElement);
+
+                     // Clean up
+                    document.body.removeChild(testDOMElement);
+                    done();
+                 }, 100)
+              });
+           });
         });
 
         it('should allow to remove all series at once', function () {