vchartist-plugin-legend

This plugin provides svg legend for vchartist.

install

npm install vchartist-plugin-legend

Available options and their defaults

  const noop = function () {}
  const defaultOptions = {
    // legendPadding, base on the chartRect
    legendPadding: {
      left: 30,
      top: 10
    },
    // build custom legend text
    labelInterpolationFnc: noop,
    className: 'ct-legend',
    legendItem: {
      span: 20,
      badge: {
        width: 16,
        height: 1
      },
      text: {
        x: 30,
        y: 5,
        'text-anchor': 'start'
      }
    }
  }

Example

The legend group is placed in the right of the chart. so we should set enough chart's right Padding to place it.

import vctLegend from 'vchartist-plugin-legend'
new Vue({
  el,
  replace: false,
  template: `<chartist
    type="Line"
    :data="chartData"
    :options="chartOptions">
  </chartist>`,
  data: {
    chartData: {
      labels: ['A', 'B', 'C'],
      series: [{
        name: 'test',
        data: [1, 3, 2]
      }]
    },
    chartOptions: {
      lineSmooth: false,
      width: '100%',
      height: '300px',
      chartPadding: {
        top: 20,
        right: 400,
        bottom: 30,
        left: 30
      },
      plugins: [
        vctLegend({
          labelInterpolationFnc: (data, index) => {
            return data.series[index] && (data.series[index].name + '') || ''
          }
        })
      ]
    }
  }
})

License

MIT