vchartist-plugin-legend
This plugin provides svg legend for vchartist.
install
npm install vchartist-plugin-legend
Available options and their defaults
const noop = {} 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.
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: