Legend or other options not working in reactiveProps

[AshwinTayson]

I have followed the code sample in the website and created a lineChart.js that looks like this

import { Line, mixins } from 'vue-chartjs'

export default Line.extend({
  mixins: [mixins.reactiveProp],
  props: ['chartData'],
  mounted () {
    this.renderChart(this.chartData, {
      legend: {
        display: false
      }
    })
  }
})

Expected Behavior

Legend should be disabled. And other options such as tooltip, responsive should work.

Actual Behavior

Chart works as intended but the legend is still showing. Any other options delivered to this.renderChart is not working.

Environment

• vue.js version: 2.3.3
• vue-chart.js version: 0.2.0
• npm version: 5.0.3

[apertureless]

This will not work this way.

You have to pass the options either as a prop or data model

import { Line, mixins } from 'vue-chartjs'

export default Line.extend({
  mixins: [mixins.reactiveProp],
  props: ['chartData'],
  data () {
    return {
      options: {
        legend: {
          display: false
        }
      }
    }
  }
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
})

This is because the reactive prop will check what data changed and either call chart.update or if new datasets arrived it will call this.renderChart(this.chartData, this.options)

As it is the base class, there is no way AFAIK to check that you are passing there. Thats why you need to store your options in options variable.

[naknode]

Trying to pass scaleShowGridLines: true and it does not work for me. :\

[apertureless]

@naknode

Please show the code snippet or codepen/jsfiddle/webpackbin etc.

[naknode]

Sure @apertureless

Here:

import { Bar } from 'vue-chartjs'

export default Bar.extend({
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
    }, {
      scaleShowGridLines: true,
      scaleGridLineColor: "rgba(0,0,0,.05)",
      scaleGridLineWidth: 1,
      scaleShowHorizontalLines: true,
      scaleShowVerticalLines: true,
      barShowStroke: true,
      barStrokeWidth: 2,
      barValueSpacing: 5,
      barDatasetSpacing: 1,
      legend: {
        display: true
      }
    })
  }
})

and

        <template>
          <dash-chart role="user" :width="500" :height="400" />
        </template>

I copied the data from the GitHub commits, and this is what I get:

[apertureless]

Well I can't find anything about scaleGridLineWidth in the Chart.js docs. Where did you found this?

[naknode]

I believe I was using an incorrect version.

I apologize.

I got it to work:

    scales : {
        xAxes : [ {
            gridLines : {
                display : true
            }
        } ]
    },

[apertureless]

nice!