chartist-plugin-legend examples

basic examples

Line Chart:

Show Code

new Chartist.Line('.ct-chart-line', {
   labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
   series: [
       { "name": "Money A", "data": [12, 9, 7, 8, 5] },
       { "name": "Money B", "data": [2, 1, 3.5, 7, 3] },
       { "name": "Money C", "data": [1, 3, 4, 5, 6] }
   ]
}, {
   fullWidth: true,
   chartPadding: {
      right: 40
   },
   plugins: [
       Chartist.plugins.legend()
   ]
});

Pie Chart:

Show Code

new Chartist.Pie('.ct-chart-pie', {
    labels: ['Piece A', 'Piece B', 'Piece C', 'Piece D'],
    series: [20, 10, 30, 40]
}, {
    showLabel: false,
    plugins: [
        Chartist.plugins.legend()
    ]
});

Bar Chart:

Show Code

new Chartist.Bar('.ct-chart-bar', {
   labels: ['First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year'],
   series: [
       { "name": "Money A", "data": [60000, 40000, 80000, 70000] },
       { "name": "Money B", "data": [40000, 30000, 70000, 65000] },
       { "name": "Money C", "data": [8000, 3000, 10000, 6000] }
   ]
}, {
   plugins: [
       Chartist.plugins.legend()
   ]
});

examples with options

Chart with className:

Adds a class to the ul element. Show Code

new Chartist.Line('.ct-chart-line-classname', {
   labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
   series: [
       { "name": "Money A", "data": [12, 9, 7, 8, 5] },
       { "name": "Money B", "data": [2, 1, 3.5, 7, 3] },
       { "name": "Money C", "data": [1, 3, 4, 5, 6] }
   ]
}, {
   fullWidth: true,
   chartPadding: {
      right: 40
   },
   plugins: [
       Chartist.plugins.legend({
          className: 'crazyPink'
       })
   ]
});

Chart with clickable:

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

new Chartist.Line('.ct-chart-line-clickable', {
   labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
   series: [
       { "name": "Money A", "data": [12, 9, 7, 8, 5] },
       { "name": "Money B", "data": [2, 1, 3.5, 7, 3] },
       { "name": "Money C", "data": [1, 3, 4, 5, 6] }
   ]
}, {
   fullWidth: true,
   chartPadding: {
      right: 40
   },
   plugins: [
       Chartist.plugins.legend({
          clickable: false
       })
   ]
});

Chart with legendNames:

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

new Chartist.Line('.ct-chart-line-legendnames', {
   labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
   series: [
       [12, 9, 7, 8, 5],
       [2, 1, 3.5, 7, 3],
       [1, 3, 4, 5, 6]
   ]
}, {
   fullWidth: true,
   chartPadding: {
      right: 40
   },
   plugins: [
       Chartist.plugins.legend({
          legendNames: ['Custom title', 'Another one', 'And the last one'],
       })
   ]
});

Chart with multiple series per item:

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

new Chartist.Line('.ct-chart-line-multipleseries', {
   labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
   series: [
       [12, 9, 7, 8, 5],
       [2, 1, 3.5, 7, 3],
       [1, 3, 4, 5, 6]
   ]
}, {
   fullWidth: true,
   chartPadding: {
      right: 40
   },
   plugins: [
       Chartist.plugins.legend({
          legendNames: [{name: 'Red-ish', series: [0,1]}, {name: 'Yellow', series: [2]}],
       })
   ]
});

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

new Chartist.Line('.ct-chart-line-onclick', {
   labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
   series: [
       { "name": "Money A", "data": [12, 9, 7, 8, 5] },
       { "name": "Money B", "data": [2, 1, 3.5, 7, 3] },
       { "name": "Money C", "data": [1, 3, 4, 5, 6] }
   ]
}, {
   fullWidth: true,
   chartPadding: {
      right: 40
   },
   plugins: [
       Chartist.plugins.legend({
          onClick: function () {
             alert('Somebody clicked a legend!');
          }
       })
   ]
});

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

new Chartist.Line('.ct-chart-line-classnames', {
   labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
   series: [
       { "name": "Money A", "data": [12, 9, 7, 8, 5] },
       { "name": "Money B", "data": [2, 1, 3.5, 7, 3] },
       { "name": "Money C", "data": [1, 3, 4, 5, 6] }
   ]
}, {
   fullWidth: true,
   chartPadding: {
      right: 40
   },
   plugins: [
       Chartist.plugins.legend({
          classNames: ['','ct-hidden','']
       })
   ]
});

Chart with removeAll:

Allow all series to be removed at once. Show Code

new Chartist.Line('.ct-chart-line-removeall', {
   labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
   series: [
       { "name": "Money A", "data": [12, 9, 7, 8, 5] },
       { "name": "Money B", "data": [2, 1, 3.5, 7, 3] },
       { "name": "Money C", "data": [1, 3, 4, 5, 6] }
   ]
}, {
   fullWidth: true,
   chartPadding: {
      right: 40
   },
   plugins: [
       Chartist.plugins.legend({
          removeAll: true
       })
   ]
});

Chart with position:

Sets the position of the legend element. top and bottom are currently accepted. Show Code

new Chartist.Line('.ct-chart-line-position', {
   labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
   series: [
       { "name": "Money A", "data": [12, 9, 7, 8, 5] },
       { "name": "Money B", "data": [2, 1, 3.5, 7, 3] },
       { "name": "Money C", "data": [1, 3, 4, 5, 6] }
   ]
}, {
   fullWidth: true,
   chartPadding: {
      right: 40
   },
   plugins: [
       Chartist.plugins.legend({
          position: 'bottom'
       })
   ]
});