Fix #22 and add docs (#25)

* Clear whitespaces

* Encapsulate the appending logic into a handler; add enumeration parsing

* Fix tests that throw errors since they exprected a synchron behaviour, which is no longer given

* Clean up syntax mess

* Add tests for custom positions

* Add documentation and make examples beautiful

* Change documentation text for clickable

README.md

@@ -73,9 +73,10 @@ new Chartist.Bar('.ct-chart', data, {
 
 | __Option__ | __Description__ | __Type__ | __Default__ |
 | ---        | ---             | ---      | ---         |
-| `className` | Add extra classes. | `string` | `''` |
-| `clickable` | Make the legend items clickable; when clicked the corresponding series will disappear. | `bool` | `true` |
-| `legendNames` | Use custom names for the legend. By default the `name` property of the series will be used (for charts labels will be used) | `mixed` | `false` |
+| `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. | `mixed` | `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. Those resemble classes added to corresponding legend elements. | `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'` |

chartist-plugin-legend.js

@@ -25,7 +25,8 @@
         removeAll: false,
         legendNames: false,
         clickable: true,
-        onClick: null
+        onClick: null,
+        position: 'top'
     };
 
     Chartist.plugins = Chartist.plugins || {};
@@ -36,6 +37,13 @@
             return a - b;
         }
 
+        // Catch invalid options
+        if (options && options.position) {
+           if (!(options.position === 'top' || options.position === 'bottom')) {
+              throw Error('The position you entered is not a valid position');
+           }
+        }
+
         options = Chartist.extend({}, defaultOptions, options);
 
         return function legend(chart) {
@@ -82,23 +90,35 @@
                 legendNames = chart.data.labels;
             }
             legendNames = options.legendNames || legendNames;
-            
+
             // Check if given class names are viable to append to legends
             var classNamesViable = (Array.isArray(options.classNames) && (options.classNames.length === legendNames.length));
-            
+
             // Loop through all legends to set each name in a list item.
             legendNames.forEach(function (legend, i) {
-                var li = document.createElement('li');
-                li.className = 'ct-series-' + i;
-                // Append specific class to a legend element, if viable classes are given
-                if (classNamesViable) {
-                   li.className += ' ' + options.classNames[i];
-                }
-                li.setAttribute('data-legend', i);
-                li.textContent = legend.name || legend;
-                legendElement.appendChild(li);
+               var li = document.createElement('li');
+               li.className = 'ct-series-' + i;
+               // Append specific class to a legend element, if viable classes are given
+               if (classNamesViable) {
+                  li.className += ' ' + options.classNames[i];
+               }
+               li.setAttribute('data-legend', i);
+               li.textContent = legend.name || legend;
+               legendElement.appendChild(li);
+            });
+
+            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;
+               }
             });
-            chart.container.appendChild(legendElement);
 
             if (options.clickable) {
                 legendElement.addEventListener('click', function (e) {
@@ -115,10 +135,9 @@
                         removedSeries.splice(removedSeriesIndex, 1);
                         li.classList.remove('inactive');
                     } else {
-                        if (!options.removeAll){
+                        if (!options.removeAll) {
                              // Remove from series, only if a minimum of one series is still visible.
-                          if ( chart.data.series.length > 1)
-                          {
+                          if ( chart.data.series.length > 1) {
                              removedSeries.push(seriesIndex);
                              li.classList.add('inactive');
                           }