Charts

You can add nice charts! We are using vue-chartjs.

<va-chart :data="chartData" type="vertical-bar"/>

// default common options
export default {
  data () {
    return {
      chartData: {
        labels: months.splice(0, size),
        datasets: [
          {
            label: 'Label1',
            backgroundColor: hex2rgb(themes['primary'], 0.6).css,
            borderColor: 'transparent',
            data: [40, 20],
          },
          {
            label: 'Label2',
            backgroundColor: hex2rgb(themes['info'], 0.6).css,
            borderColor: 'transparent',
            data: [20, 40],
          }
        ],
      }
    }
  },
}

Props

• data - Object - set of your data to display: more data examples
• options - Object - options of your chart: more options
• type - String - type of chart. va-chart supports different types of charts: vertical-bar, horizontal-bar, line, pie, donut and bubble.

Reactive data

• if you want chart data to be reactive, you have to reassign it from parent via Object.assign.
• Watcher is not deep.

For more information and customization see vue-chartjs docs!
Find DEMOs here!