diff --git a/docs/README.md b/docs/README.md index f2b5a26e..0b78fc62 100644 --- a/docs/README.md +++ b/docs/README.md @@ -75,6 +75,27 @@ There are some basic props defined in the BaseCharts. Because you `extend()` the | chart-id | id of the canvas | | css-classes | String with css classes for the surrounding div | | styles | Object with css styles for the surrounding div container | +| plugins | Array with chartjs plugins | + +## Legend Generation + +`vue-chartjs` provides a small helper to generate a HTML legend. + +```js +import { Line } from 'vue-chartjs' + +export default { + extends: Line, + props: ['datasets', 'options'] + data: () => ({ + htmlLegend: null + }) + mounted () { + this.renderChart(this.datasets, this.options) + this.htmlLegend = this.generateLegend() + } +} +``` ## Examples diff --git a/src/BaseCharts.js b/src/BaseCharts.js index 871dc941..faf2e580 100644 --- a/src/BaseCharts.js +++ b/src/BaseCharts.js @@ -62,6 +62,11 @@ export function generateChart (chartId, chartType) { addPlugin (plugin) { this.$data._plugins.push(plugin) }, + generateLegend () { + if (this.$data._chart) { + return this.$data._chart.generateLegend() + } + }, renderChart (data, options) { if (this.$data._chart) this.$data._chart.destroy() this.$data._chart = new Chart(