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.
Supports Chart.js v3 and v2.
Install this library with peer dependencies:
pnpm add vue-chartjs chart.js
# or
yarn add vue-chartjs chart.js
# or
npm i vue-chartjs chart.js
We recommend using chart.js@^3.0.0.
Need an API to fetch data? Consider Cube, an open-source API for data apps.
This package works with version 2.x and 3.x of Vue.
Import the component.
import { Bar } from 'vue-chartjs'
For Vue 2 projects, you need to import from vue-chartjs/legacy.
import { Bar } from 'vue-chartjs/legacy'
Just create your own component.
<template>
<Bar
:chart-options="chartOptions"
:chart-data="chartData"
:chart-id="chartId"
:dataset-id-key="datasetIdKey"
:plugins="plugins"
:css-classes="cssClasses"
:styles="styles"
:width="width"
:height="height"
/>
</template>
<script>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
export default {
name: 'BarChart',
components: { Bar },
props: {
chartId: {
type: String,
default: 'bar-chart'
},
datasetIdKey: {
type: String,
default: 'label'
},
width: {
type: Number,
default: 400
},
height: {
type: Number,
default: 400
},
cssClasses: {
default: '',
type: String
},
styles: {
type: Object,
default: () => {}
},
plugins: {
type: Array,
default: () => []
}
},
data() {
return {
chartData: {
labels: [ 'January', 'February', 'March' ],
datasets: [ { data: [40, 20, 12] } ]
},
chartOptions: {
responsive: true
}
}
}
}
</script>
or in TypeScript
// BarChart.ts
import { defineComponent, h, PropType } from 'vue'
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, PluginOptionsByType } from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
export default defineComponent({
name: 'BarChart',
components: { Bar },
props: {
chartId: {
type: String,
default: 'bar-chart'
},
width: {
type: Number,
default: 400
},
height: {
type: Number,
default: 400
},
cssClasses: {
default: '',
type: String
},
styles: {
type: Object as PropType<Partial<CSSStyleDeclaration>>,
default: () => {}
},
plugins: {
type: Array as PropType<Plugin<'bar'>[]>,
default: () => []
}
},
setup(props) {
const chartData = {
labels: [ 'January', 'February', 'March' ],
datasets: [ { data: [40, 20, 12] } ]
}
const chartOptions = { responsive: true }
return () =>
h(Bar, {
chartData,
chartOptions,
chartId: props.chartId,
width: props.width,
height: props.height,
cssClasses: props.cssClasses,
styles: props.styles,
plugins: props.plugins
})
}
})
Use it in your vue app
<template>
<BarChart />
</template>
<script>
import BarChart from 'path/to/component/BarChart'
export default {
name: 'App',
components: { BarChart }
}
</script>
# install dependencies
pnpm install
# build for production with minification
pnpm build
# run unit tests
pnpm unit
# run all tests
pnpm test
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.
4.1.0 (2022-05-10)
FAQs
Vue.js wrapper for chart.js for creating beautiful charts.
The npm package vue-chartjs receives a total of 388,841 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.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.