Vue.js using chart.js options not working

Question

Hey guys I am currently using example code for vue-chartjs but when I'm trying to add options it does not allow me to add it for some reason. Maybe I am misplacing it, but I'm not sure.

Here is my source code.

// CommitChart.js
import {  Bar } from 'vue-chartjs'

function getNum(){return Math.floor(Math.random() * 100);}

export default {
  extends: Bar,
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: ['Yeah', 'What', 'Turnup'],
      datasets: [
        {
          label: 'Skimp me',
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
          ],
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
          ],
          data: [getNum(), getNum(), getNum()],
          borderWidth: 1
        }
      ],
      // ATTEMPTING TO ADD OPTIONS. 
      options: {
         scales: {
           yAxes: [{
            ticks: {
              beginAtZero:true
           }
          }]
        }
      }
   })
 }
}

Everything works but I cannot figure out why this is wrong. Thanks!

robhirstio · Accepted Answer · 2018-07-03 23:01:02Z

2

You can overwrite the default chart options. Just pass the options object as a second parameter to the render method.

Right now your options are within the first object passed in.

answered Jul 3, 2018 at 23:01

robhirstio

1811 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js using chart.js options not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related