Charts

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

<vuestic-chart v-bind:data="chartData" :options="chartOptions" type="vertical-bar"></vuestic-chart>

// default common options
export default {
  legend: {
    position: 'bottom',
    labels: {
      fontColor: palette.fontColor,
      fontFamily: 'sans-serif',
      fontSize: 14,
      padding: 20,
      usePointStyle: true
    }
  },
  tooltips: {
    bodyFontSize: 14,
    bodyFontFamily: 'sans-serif'
  },
  responsive: true,
  maintainAspectRatio: false
}
// example of data
let chartData = {
  labels: ['January', 'February'],
  datasets: [
    {
      label: 'GitHub Commits',
      backgroundColor: '#f87979',
      data: [40, 20]
    }
  ]
}

data: Object -- Set of your data to display: more data examples
options: Object -- Options of your chart: more options
type: String -- Type of chart. vuestic-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 Documentation. Watcher is not deep.

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