Comments (3)
Hey @gkatsanos
there are a few errors in your example.
1. You don't need to import both
import VueCharts from 'vue-chartjs'
import { Bar, Line } from 'vue-chartjs'
If you do import VueCharts from 'vue-chartjs'
, you can access all chart types over the VueCharts
object. For example VueCharts.Bar
or VueCharts.Doughnut
However most of the time, your component will only represent one chart type. So thats why you can import only the nessasary modules
import { Bar } from 'vue-chartjs'
2. Template
You don't need the template tag with the canvas inside of it.
The template is included into the base charts you import over import { Bar } from 'vue-chartjs'
Thats why you *.extend() it.
3. Vue Single File component
As far as I remeber, you can't do this export default Bar.extend({})
in vue single file components. If you really need the single file components, there is a property you can use extends: <component>
it was mentioned in #12
// MyChart.vue
<template>
...
</template>
<script>
import {Bar} from 'vue-chartjs'
export default {
extends: Bar
data () { ... }
}
</script>
However as you don't need the template tag and styling, you can make it a simple js file.
4. Fixed example
// YourChart.js
import { Bar } from 'vue-chartjs'
export default Bar.extend({
name: 'dashboard',
mounted: function () {
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
label: 'GitHub Commits',
backgroundColor: '#f87979',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
}
]
})
}
})
And then you can import your component into other vue components
//Dasboard.vue
<template>
<div class="container">
<your-chart :width="400" :height="400"></your-chart>
</div>
</template>
<script>
import YourChart from './your-chart.js'
export default {
components: { YourChart },
data () {
....
}
}
</script>
<style>
.container { max-width: 80rem; margin: 0 auto;}
</style>
from vue-chartjs.
Thank you for the kind and super long reply, I appreciate it.
I have a rather stupid question : Why the vue wrapper over the actual library itself?
In the end I realized my problem was not initializing the chart inside mounted ..
from vue-chartjs.
Well, like with nearly all wrappers and bindings in vue that work with third party plugins or libs, there is no real benefit.
The pros are that it works simply out of the box. And is a predefined component.
You can import it, pass the data and thats it. You don't need to care about the canvas, ids etc.
I created it for a side project of mine and I was too lazy to always replicate the code. Create a canvas, create a new chartjs instance etc. So I added a small layer of abstraction.
Its good, if you want something fast up and running. However if you need more control and have very specific use cases, it's always better to implement them by yourself.
from vue-chartjs.
Related Issues (20)
- Standalone page support HOT 1
- [Bug]: Read only issue while using vue-query HOT 3
- [Bug]: Reactive Data on Line Chart : can update a single value, cannot update the entire array
- [Bug]: Options (parsing) not updating chart as expected HOT 1
- [Bug]: Error with package version HOT 2
- Mixed chart types support HOT 5
- [Bug]: vue-tsc reports type errors
- [Bug]: Rendering a chart with multiple y axes will display both datasets on the larger scale HOT 1
- [Bug]: Line data point can be of type string when using a timescale HOT 1
- different behaviour between chrome and firefox with same dataset
- [Bug]: Wrong typings for Bar component HOT 7
- a11y: support ARIA attributes, role and fallback content for canvas
- [Bug]: Incorrect animation on data change on two or more datasets in doughnut chart
- [Bug]: Tooltip references invalid element after chart data updates HOT 2
- [Bug]: Fill property is ignored in Line Chart HOT 1
- [Bug]: Dynamically updating a chart HOT 5
- [Bug]: Error: "category" is not a registered scale. HOT 1
- Seems like there is no way to use chartjs-gauge library with vue-chartjs. Is there a workaround? HOT 2
- [Bug]: Problem using vue-chartjs when imported as ESM module
- [Bug]: Type error for `Line` `options` with `chartjs-zoom-plugin` HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-chartjs.