Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including chartist-plugin-legend with all npm packages installed. Try it out:

var chartistPluginLegend = require("chartist-plugin-legend")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

chartist-plugin-legend v0.6.2

Legend plugin for Chartist.js.

chartist-plugin-legend

Build Status Coverage Status

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);
        }
    }
}

Usage

In an example chart:

require('chartist-plugin-legend');

new Chartist.Bar('.ct-chart', data, {
        stackBars: true,
        plugins: [
            Chartist.plugins.legend()
        ]
    },
});
OptionDescriptionTypeDefault
classNameAdds a class to the ul element.string''
clickableSets the legends clickable state; setting this value to false disables toggling graphs on legend click.booltrue
legendNamesSets custom legend names. By default the name property of the series will be used if none are given.mixedfalse
onClickAccepts a function that gets invoked if clickable is true. The function has the chart, and the click event (e), as arguments.mixedfalse
classNamesAccepts a array of strings as long as the chart's series, those will be added as classes to the li elements.mixedfalse
removeAllAllow all series to be removed at once.boolfalse
positionSets 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'

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free