From fc646d8202597b6010abeb57a2c88aae49b63507 Mon Sep 17 00:00:00 2001
From: Jakub <netghost03@gmail.com>
Date: Sat, 4 Aug 2018 11:59:44 +0200
Subject: [PATCH] feat(ux): Add a wrapper around generateLegend (#390)

As this is used quite often this wrapper function will improve the UX of generating a legend
---
 docs/README.md    | 21 +++++++++++++++++++++
 src/BaseCharts.js |  5 +++++
 2 files changed, 26 insertions(+)

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(