chartist-plugin-legend examples

basic examples

Line Chart:

Show Code

Pie Chart:

Show Code

Bar Chart:

Show Code

examples with options

Chart with className:

Adds a class to the ul element. Show Code

Chart with clickable:

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

Chart with legendNames:

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

Chart with multiple series per item:

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

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. Show Code

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. Show Code

Chart with removeAll:

Allow all series to be removed at once. Show Code

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. Show Code

Chart with a DOM2 Element position:

Show Code