vue-chartjs

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//unpkg.com/vue"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    <script src="//unpkg.com/vue-chartjs@3.4.0/dist/vue-chartjs.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <div class="app">
      <h1>Bar Chart</h1>
	    <bar-chart></bar-chart>
	    <h1>Line Chart</h1>
	    <line-chart></line-chart>
    </div>
    <script src="script.js"></script>
  </body>
</html>




Vue.component('bar-chart', {
  extends: VueChartJs.Bar,
  data() {
    return {
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [{
          label: 'Bar Dataset',
          data: [10, 20, 30, 40, 50, 30],
          backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)'],
          borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)'],
          borderWidth: 1
        }, {
          label: 'Line Dataset',
          data: [10, 50, 20, 30, 30, 40],
          borderColor: '#CFD8DC',
          fill: false,
          type: 'line',
          lineTension: 0.3,
        }]
      },
      options: {
        scales: {
          xAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'Month'
            }
          }],
          yAxes: [{
            ticks: {
              beginAtZero: true,
              stepSize: 10,
            }
          }]
        }
      }
    }
  },
  mounted() {
    this.renderChart(this.data, this.options)
  }
})

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
    })
  }
})

var app = new Vue({
  el: '.app',
})

/* Styles go here */