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

  1. <vuestic-chart v-bind:data="chartData" :options="chartOptions" type="vertical-bar"></vuestic-chart>
  2.  
  3. <script>
  4. // default common options
  5. export default {
  6.   legend: {
  7.     position: 'bottom',
  8.     labels: {
  9.       fontColor: palette.fontColor,
  10.       fontFamily: 'sans-serif',
  11.       fontSize: 14,
  12.       padding: 20,
  13.       usePointStyle: true
  14.     }
  15.   },
  16.   tooltips: {
  17.     bodyFontSize: 14,
  18.     bodyFontFamily: 'sans-serif'
  19.   },
  20.   responsive: true,
  21.   maintainAspectRatio: false
  22. }
  23. // example of data
  24. let chartData = {
  25.   labels: ['January', 'February'],
  26.   datasets: [
  27.     {
  28.       label: 'GitHub Commits',
  29.       backgroundColor: '#f87979',
  30.       data: [40, 20]
  31.     }
  32.   ]
  33. }
  34. </script>

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. 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.
  • Watcher is not deep.
    For more information and customization see vue-chartjs docsFind DEMOs here!