chartist-plugin-legend

Implements a legend for Chartist charts.

Demo

Install

$ npm install chartist-plugin-legend --save

As styles are very different with each project, no CSS is included. You can copy paste this to use as base:

.ct-legend {
    position: relative;
    z-index: 10;

    li {
        position: relative;
        padding-left: 23px;
        margin-bottom: 3px;
    }

    li:before {
        width: 12px;
        height: 12px;
        position: absolute;
        left: 0;
        content: '';
        border: 3px solid transparent;
        border-radius: 2px;
    }

    li.inactive:before {
        background: transparent;
    }

    &.ct-legend-inside {
        position: absolute;
        top: 0;
        right: 0;
    }

    @for $i from 0 to length($ct-series-colors) {
        .ct-series-#{$i}:before {
            background-color: nth($ct-series-colors, $i + 1);
            border-color: nth($ct-series-colors, $i + 1);
        }
    }
}

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:

<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:

require('chartist-plugin-legend');

new Chartist.Bar('.ct-chart', data, {
        stackBars: true,
        plugins: [
            Chartist.plugins.legend()
        ]
    },
)

Option	Description	Type	Default
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
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 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'