Vue vue-chartjs sample

by kabanoki

HTML

<div id="app">
    <div class="box">
        <h2>Line</h2>
        <line-chart></line-chart>
    </div>
    <div class="box">
        <h2>Bar</h2>
        <bar-chart></bar-chart>
    </div>
    <div class="box">
        <h2>Radar</h2>
        <radar-chart></radar-chart>
    </div>
    
    <div class="box">
        <h2>Pie</h2>
        <pie-chart></pie-chart>
    </div>
    
    <div class="box">
      <h2>Doughnut</h2>
    <doughnut-chart></doughnut-chart>
    </div>
    
    <div class="box">
      <h2>polarArea</h2>
    <polar-area-chart></polar-area-chart>
    </div>
    
    <div class="box">
      <h2>bubble</h2>
    <bubble-chart></bubble-chart>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-chartjs.min.js"></script>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

.box {
      width: 33%;
      float: left;
      background-color: #fff;
    }

Vue

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

  Vue.component('bar-chart', {
    extends: VueChartJs.Bar,
    mounted () {
      this.renderChart({
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            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
        }]
      }, {responsive: true, maintainAspectRatio: false})
    }
  })

  Vue.component('radar-chart', {
    extends: VueChartJs.Radar,
    mounted () {
      this.renderChart({
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            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: [
  ...