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.

Demo & Docs

• 📺 Demo
• 📖 Docs

Compatibility

• v1 later @legacy
  • Vue.js 1.x
• v2 later
  • Vue.js 2.x

After the final release of vue.js 2, you also get the v2 by 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

Install

Simply run yarn add vue-chartjs chart.js

Or if you want to use it directly in the browser add

<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.full.min.js"></script>

to your scripts. See Codepen

Explanation of Different Builds

There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a peerDependency.

• Browser
• Browserify / Webpack 1
• Webpack 2

| Build | Chart.js | |---|---|---| | vue-chartjs.full.js | Bundled | | vue-chartjs.full.min.js | Bundled | | vue-chartjs.js | peerDependency | | vue-chartjs.min.js | peerDependency | | es/index* | peerDependency |

Browser

You can use vue-chartjs directly in the browser without any build setup. Like in this codepen. For this case, please use the vue-chartjs.full.min.js which is the minified version. It has Chart.js bundled into it. And bundled to a UMD Module. So you only need that one file.

You can then simply register your component:

Vue.component('line-chart', {
  extends: VueChartJs.Line,
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})
  }
})

Browserify / Webpack 1

If you're using Gulp, Browserify or Webpack 1 the entry is vue-chartjs.js which is transpiled and bundled UMD Module.

However Chart.js is a peerDependencies so you have to install it separately. In most projects This way, you can have different versions of Chart.js then in this package.

Webpack 2

If you're using Webpack 2 it will automatically use the jsnext:main / module entry point. Which is es/index.js It is a transpiled es version of the source. And is not bundled to a module. This way you three shaking will work. Like in the bundled version, Chart.js is a peerDependencies and need to be installed.

How to use

You need to import the component and then either use extends or mixins and add it.

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 {
  extends: Bar,
  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'

Another Example with options

You can overwrite the default chart options. Just pass the options object as a second paramenter to the render method

// MonthlyIncome.vue
import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  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>

Reactivity

Chart.js does not update or re-render the chart if new data is passed. However you can simply implement this on your own or use one of the two mixins which are included.

• reactiveProp
• reactiveData

Both 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. However keep in mind the limitations of vue and javascript for mutations on arrays and objects. More info here

// MonthlyIncome.js
import { Line, mixins } from 'vue-chartjs'

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

Mixins module

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 {
  extends: VueCharts.Line,
  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 {
  extends: Line,
  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 {
  extends: Line,
  mixins: [reactiveProp],
  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

Available Charts

Bar Chart

Line Chart

Doughnut

Pie

Radar

Polar Area

Bubble

Scatter

Build Setup

# 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 a detailed explanation on how things work, check out the guide and docs for vue-loader.

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

v3.0.0 (2017-10-14)

Full Changelog

Closed issues:

• Create an image of the chart to download #219
• How to achieve this effect? #218
• Some Error #217
• Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "chartData" #216
• can't get legendCallback to fire at all #212
• this demo is not support, is it because version older? #210
• how to change value without reload?? #208
• typescript definition? #207
• 使用动态数据时报错 #204
• Commit the final dist js files to github #202
• [Best Practices❓] Usage of Private Data #182
• 📝 Update docs & examples - SSR with nuxt #172
• 📝 Update Docs - Section about extending #171
• Register vue-chartjs as vue-plugin? #168
• Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders #151

Merged pull requests:

• Feature/v3 #225 (apertureless)
• ✏️ Spelling in docs #215 (cugu)
• Fix inaccuracies in Russian translation #214 (pushkyn)
• Add id docs readme support #213 (tesarwijaya)
• French translation for README.md #211 (julienc91)