vue-chartjs
Advanced tools
vue-chartjs is a wrapper for Chart.js in Vue. It allows you to create various types of charts using the Chart.js library while leveraging the reactive data-binding and component-based architecture of Vue.js.
Line Chart
This code sample demonstrates how to create a simple line chart using vue-chartjs. The `Line` component from vue-chartjs is used to render the chart, and the data and options are passed as props.
```javascript
<template>
<line-chart :chart-data="datacollection" :options="options"></line-chart>
</template>
<script>
import { Line } from 'vue-chartjs'
export default {
components: {
LineChart: Line
},
data () {
return {
datacollection: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 39, 10, 40, 39, 80, 40]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false
}
}
}
}
</script>
```Bar Chart
This code sample demonstrates how to create a bar chart using vue-chartjs. The `Bar` component is used to render the chart, and the data and options are passed as props.
```javascript
<template>
<bar-chart :chart-data="datacollection" :options="options"></bar-chart>
</template>
<script>
import { Bar } from 'vue-chartjs'
export default {
components: {
BarChart: Bar
},
data () {
return {
datacollection: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 39, 10, 40, 39, 80, 40]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false
}
}
}
}
</script>
```Pie Chart
This code sample demonstrates how to create a pie chart using vue-chartjs. The `Pie` component is used to render the chart, and the data and options are passed as props.
```javascript
<template>
<pie-chart :chart-data="datacollection" :options="options"></pie-chart>
</template>
<script>
import { Pie } from 'vue-chartjs'
export default {
components: {
PieChart: Pie
},
data () {
return {
datacollection: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: 'Data One',
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'],
data: [12, 19, 3, 5, 2, 3]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false
}
}
}
}
</script>
```vue-echarts is a wrapper for Apache ECharts, a powerful charting and visualization library. It provides a wide range of chart types and customization options. Compared to vue-chartjs, vue-echarts offers more advanced features and a larger variety of chart types, but it may have a steeper learning curve.
vue-d3 is a library that integrates D3.js with Vue.js. D3.js is a powerful library for creating complex and interactive data visualizations. vue-d3 allows you to use D3.js within Vue components. Compared to vue-chartjs, vue-d3 offers more flexibility and control over the visualizations, but it requires a deeper understanding of D3.js.
vue-apexcharts is a wrapper for ApexCharts, a modern charting library that offers a variety of interactive charts. It is easy to use and integrates well with Vue.js. Compared to vue-chartjs, vue-apexcharts provides more interactive features and a more modern look and feel, but it may not be as widely used or documented.
vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components.
@legacy
After the final release of vue.js 2, you also get the v2 per default if you install vue-chartjs over npm. No need for the @next tag anymore. If you want the v1 you need to define the version or use the legacy tag. If you're looking for v1 check this branch
Simply run npm install vue-chartjs
You need to import the base chart class and extend it. This gives much more flexibility when working with different data. You can pass the data over props or vue-resource.
You can import the whole package or each module individual.
import VueCharts from 'vue-chartjs'
import { Bar, Line } from 'vue-chartjs'
Just create your own component.
// CommitChart.js
import { Bar } from 'vue-chartjs'
export default Bar.extend({
mounted () {
// Overwriting base render method with actual data.
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]
}
]
})
}
})
Then simply import and use your own extended component and use it like a normal vue component
import CommitChart from 'path/to/component/CommitChart'
You can overwrite the default chart options. Just pass the options object as a second paramenter to the render method
// MonthlyIncome.js
import { Line } from 'vue-chartjs'
export default Line.extend({
props: ["data", "options"],
mounted () {
this.renderChart(this.data, this.options)
}
})
Use it in your vue app
import MonthlyIncome from 'path/to/component/MonthlyIncome'
<template>
<monthly-income :data={....} />
</template>
<script>
export default {
components: { MonthlyIncome },
....
}
</script>
Chart.js does not update or re-render the chart if new data is passed. However you can simply implement this by your own or use one of the two mixins which are included.
reactivePropreactiveDataBoth are included in the mixins module.
The mixins automatically create chartData as a prop or data. And add a watcher. If data has changed, the chart will update.
// MonthlyIncome.js
import { Line, mixins } from 'vue-chartjs'
export default Line.extend({
mixins: [mixins.reactiveProp],
props: ["chartData", "options"],
mounted () {
this.renderChart(this.chartData, this.options)
}
})
The mixins module is included in the VueCharts module and as a seperate module.
Some ways to import them:
// Load complete module with all charts
import VueCharts from 'vue-chartjs'
export default VueCharts.Line.extend({
mixins: [VueCharts.mixins.reactiveProp],
props: ["chartData", "options"],
mounted () {
this.renderChart(this.chartData, this.options)
}
})
// Load speperate modules
import { Line, mixins } from 'vue-chartjs'
export default Line.extend({
mixins: [mixins.reactiveProp],
props: ["chartData", "options"],
mounted () {
this.renderChart(this.chartData, this.options)
}
})
// Load speperate modules with destructure assign
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default Line.extend({
mixins: [reactiveProp],
props: ["chartData", "options"],
mounted () {
this.renderChart(this.chartData, this.options)
}
})
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
For detailed explanation on how things work, checkout the guide and docs for vue-loader.
git checkout -b my-new-feature)git commit -am 'Add some feature')git push origin my-new-feature)This software is distributed under MIT license.
FAQs
Vue.js wrapper for chart.js for creating beautiful charts.
The npm package vue-chartjs receives a total of 252,090 weekly downloads. As such, vue-chartjs popularity was classified as popular.
We found that vue-chartjs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.