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

VueJS wrapper for ChartJs

Install

Simply run npm install vue-chartjs

How to use

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 } from 'vue-chartjs'

Just create your own component.

```javascript
// CommitChart.js
import { Bar } from 'vue-chartjs'

export default BarChart.extend({
  ready () {
    // Overwriting base render method with actual data.
    this.render({
      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.js
import { Line } from 'vue-chartjs'

export default LineChart.extend({
  props: [data, options],
  ready () {
    this.render(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>

Available Charts

Bar Chart

Line Chart

Doughnut

Pie

Radar

Polar Area

Todo

• Implement Bar Chart
• Implement Line Chart
• Implement Radar Chart
• Implement Polar Area Chart
• Implement Pie Chart
• Implement Doughnut Chart
• Make npm module
• Add tests

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