vue-chartjs

What is vue-chartjs?

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.

What are vue-chartjs's main functionalities?

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>
```

Other packages similar to vue-chartjs

vue-echarts

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

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

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.

README

vue-chartjs

vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components.

Supports Chart.js v3 and v2.

Install   •   Docs   •   How to use   •   Migration to v4   •   Demo   •   Slack   •   Stack Overflow

---

Install

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.

Docs

• 📖 v3 Docs

How to use

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: Object,
      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: Object as PropType<PluginOptionsByType<'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>

Reactivity

vue-chartjs will update or re-render the chart if new data is passed.

Migration to v4

With v4, this library introduces a number of breaking changes. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit.

v4 is fully compatible with Chart.js v3.

Tree-shaking

v4 of this library, just like Chart.js v3, is tree-shakable. It means that you need to import and register the controllers, elements, scales, and plugins you want to use.

For a list of all the available items to import, see Chart.js docs.

v3:

import { Bar } from 'vue-chartjs'

v4 — lazy way:

import 'chart.js/auto';
import { Bar } from 'vue-chartjs'

v4 — tree-shakable way:

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)

Using the "lazy way" is okay to simplify the migration, but please consider using the tree-shakable way to decrease the bundle size.

Please note that typed chart components register their controllers by default, so you don't need to register them by yourself. For example, when using the Pie component, you don't need to register PieController explicitly.

import { Pie } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)

Changing the creation of Charts

In v3, you needed to import the component, and then either use extends or mixins and add it.

v3:

// BarChart.js
import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: ['January', 'February', 'March'],
      datasets: [
        {
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
          data: [40, 20, 12]
        }
      ]
    })
  }
}

<template>
  <BarChart />
</template>

<script>
// DataPage.vue
import BarChart from 'path/to/component/BarChart'

export default {
  name: 'DataPage',
  components: { BarChart }
}
<script>

In v4, you need to import the component, pass props to it, and use Chart component as a standard Vue component.

<template>
  <Bar :chart-data="chartData" />
</template>

<script>
// DataPage.vue
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 },
  data() {
    return {
      chartData: {
        labels: [ 'January', 'February', 'March'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 20, 12]
          }
        ]
      }
    }
  }
}
</script>

New reactivity system

v3 does not update or re-render the chart if new data is passed. You needed to use reactiveProp and reactiveData mixins for that.

v3:

import { Line, mixins } from 'vue-chartjs'

export default {
  extends: Line,
  mixins: [mixins.reactiveProp],
  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

v4 charts have data change watcher by default. v4 will update or re-render the chart if new data is passed. Mixins have been removed.

v4:

<template>
  <Bar :chart-data="chartData" />
</template>

<script>
// DataPage.vue
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 },
  computed: {
      chartData() { return /* mutable chart data */ }
    }
}
</script>

Demo

• 📺 Demo

Available Charts

Bar Chart

Line Chart

Doughnut

Pie

Radar

Polar Area

Bubble

Scatter

Build Setup

# install dependencies
pnpm install

# build for production with minification
pnpm build

# run unit tests
pnpm unit

# run all tests
pnpm test

Contributing

1. Fork it ( https://github.com/apertureless/vue-chartjs/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request

License

This software is distributed under MIT license.

Changelog

4.0.1 (2022-03-25)

Bug Fixes

• change images source in readme (#779) (b77bd31)