Adding options to vue-chartjs seems not working

4
votes

I'm using vue-chartjs on my project. What I want to achieve is to add options same as the original chartjs but not working in my case. Like when I remove/hide the chart title and remove the y-axis, etc. I believe this is chartjs v2. See sample code below.

import { Line } from 'vue-chartjs'
export default Line.extend({
  mounted() {
    props: ['options'],
    this.renderChart({
      labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
      options: {
        legend: { //hides the legend
          display: false,
        },
        scales: { //hides the y axis
          yAxes: [{
            display: false
          }]
        }
      },
      datasets: [
        {
          lineTension: 0,
          borderWidth:1,
          borderColor: '#F2A727',
          pointBackgroundColor: '#F2A727',
          backgroundColor: 'transparent',
          data: [40, 20, 12, 39, 10, 30]
        }
      ]
    })
  }
})

Any help would be much appreciated.

1
chart.jsvue-chartjs

1 Answers

7
votes

TRY using the following ...

import { Line } from 'vue-chartjs'
export default Line.extend({
   props: ['data', 'options'],
   mounted() {
      this.renderChart({
         labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
         datasets: [{
            lineTension: 0,
            borderWidth: 1,
            borderColor: '#F2A727',
            pointBackgroundColor: '#F2A727',
            backgroundColor: 'transparent',
            data: [40, 20, 12, 39, 10, 30]
         }]
      }, {
         legend: { //hides the legend
            display: false,
         },
         scales: { //hides the y axis
            yAxes: [{
               display: false
            }]
         }
      })
   }
})

not 'vue-chartjs' pro but AFAIK this should work