chartist-plugin-legend examples

basic examples

Line Chart:

Pie Chart:

Bar Chart:

examples with options

Chart with className:

Adds a class to the ul element.

Chart with clickable:

Sets the legends clickable state; setting this value to false disables toggling graphs on legend click.

Chart with legendNames:

Sets custom legend names. By default the name property of the series will be used if none are given.

Chart with multiple series per item:

The legendNames property can be used to associate multiple series with a legend item.

Chart with onClick:

Accepts a function that gets invoked if clickable is true. The function has the chart, and the click event (e), as arguments.

Chart with classNames:

Accepts a array of strings as long as the chart's series, those will be added as classes to the li elements.

Chart with removeAll:

Allow all series to be removed at once.

Chart with position 'bottom':

Sets the position of the legend element. top, bottomor any DOM2 Element are currently accepted. If a DOM Element is given, the legend will be appended as it's last child.

Chart with a DOM2 Element position: