[Vuejs]-Using chartJs in a Vue Component and a Webpack cli setup

by

1👍

There is no scale option you should use scales.

new Vue({
    el: "#app",
    methods: {
      createChart(chartId,chartData){
        var myChart = new Chart(this.$refs.chart.getContext("2d"), {
          type: 'bar',
          data: {
            labels: ['JavaScript','NodeJs','VueJs','DataBase'],
            datasets: [{
              label: '# of votes',
              data: chartData,
              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)',
              ],
              borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
              ],
              borderWidth: 1
            }]
          },
          options: {
            scales: {
              yAxes: [{
                ticks: {beginAtZero: true}
              }]
            }
          }
        });
      }
    },
    mounted(){
      let data = [12,15,23,7]
      this.createChart('chart',data);
    }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<div id="app">
 <canvas id="chart" ref="chart" width="400" height="400"></canvas>
</div>
👤Max Sinev

Leave a comment