404
Looks like we've got some broken links.Take me home.
There are some basic props defined in the components provided by vue-chartjs. Because you extend them, they are invisible, but you can overwrite them:
| Prop | Description |
|---|---|
| width | chart width |
| height | chart height |
| 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 |
If the reactiveData or reactiveProp mixin is attached, following events will be emitted:
| Event | Description |
|---|---|
chart:render | if the mixin performs a complete rerender |
chart:destroy | if the mixin deletes the chart object instance |
chart:update | if the mixin performs an update instead of a re-render |
labels:update | if new labels were set |
xlabels:update | if new xLabels were set |
ylabels:update | if new yLabels were set |
Global Methods need to be imported.
Functionchart-id, chart-typeimport { generateChart } from 'vue-chartjs'
-// First argument is the chart-id, second the chart type.
-const CustomLine = generateChart('custom-line', 'LineWithLine')
-Instance methods can be used inside your chart component.
Helper function to generate a HTML legend.
Functionnoneimport { 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()
- }
-}
-
-In Chart.js you can define global and inline plugins. Global plugins are working without problems with vue-chartjs like in the Chart.js docs described.
If you want to add inline plugins, vue-chartjs exposes a helper method called addPlugin()
-You should call addPlugin() before the renderChart() method.
FunctionArray of Pluginsmounted () {
- this.addPlugin({
- id: 'my-plugin',
- beforeInit: function (chart) {
- ....
- }
- })
-}
-Creates a Chart.js instance and renders the chart.
FunctionChart Data, Chart Optionsmounted () {
- this.renderChart({
- labels: ['January', 'February'],
- datasets: [
- {
- label: 'Data One',
- backgroundColor: '#f87979',
- data: [40, 20]
- }
- ]},
- {
- responsive: true
- }
- )
-}
-You can access the Chart.js object inside your chart component with this.$data._chart
You can access the canvas with this.$refs.canvas