Skip to content

Commit

Permalink
feat(ux): Add a wrapper around generateLegend (apertureless#390)
Browse files Browse the repository at this point in the history
As this is used quite often this wrapper function will improve the UX of generating a legend
  • Loading branch information
apertureless authored Aug 4, 2018
1 parent 23ff90d commit fc646d8
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 0 deletions.
21 changes: 21 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
5 changes: 5 additions & 0 deletions src/BaseCharts.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down

0 comments on commit fc646d8

Please sign in to comment.