Vue-Chartjs reactive chart options passing

Question

So I follow the author's doc and make a reactive chart just as the doc sample.

A js file & a vue file :

// the chart.js file
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}


// the chart.vue file
<template>
  <div style="background:#fff;">
    <line-chart :chart-data="datacollection"></line-chart>
    <button @click="fillData()">Randomize</button>
  </div>
</template>

<script>
import LineChart from './chart'

export default {
  components: {
    LineChart
  },
  data () {
    return {
      datacollection: null
    }
  },
  mounted () {
    this.styling()
    this.fillData()
  },
  methods: {
    fillData () {
      this.datacollection = {
        labels: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()],
        gridLines: {
          display: false
        },
        datasets: [
          {
            label: 'Data One',
            fill: false,
            borderColor: 'red',
            backgroundColor: 'red',
            borderWidth: 1,
            data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
          }
        ]
      }
    },
    styling () {
      this.Chart.defaults.global.elements.line.backgroundColor = '#1d3'
    },
    getRandomInt () {
      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
    }
  }
}
</script>

The problem is : it seems that I can't pass options whatsoever.

What I need to do is

1. Hide all gridlines inculding x&y
2. Make the tooltips always displayed

But I've tried every way possible and none of them works , even like :

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    this.renderChart(this.chartData, {
      scales: {
        xAxes: [{
          gridLines: {
            color: "rgba(0, 0, 0, 0)",
            display: false
          }
        }],
        yAxes: [{
          gridLines: {
            color: "rgba(0, 0, 0, 0)",
            display: false
          }
        }]
      }
    })
  }
}

It won't work , tooltips is the same

I just want to know , is it possible for reactive vuechartjs to pass options ? or I just need to use chartjs instead ?

Answer 1

You can check demo at https://codepen.io/ittus/pen/MGQaNY

To make tooltips always display, you can add

Chart.pluginService.register({
 beforeRender: function(chart) {
  if (chart.config.options.showAllTooltips) {
   chart.pluginTooltips = [];
   chart.config.data.datasets.forEach(function(dataset, i) {
    chart.getDatasetMeta(i).data.forEach(function(sector, j) {
     chart.pluginTooltips.push(new Chart.Tooltip({
      _chart: chart.chart,
      _chartInstance: chart,
      _data: chart.data,
      _options: chart.options.tooltips,
      _active: [sector]
     }, chart));
    });
   }); // turn off normal tooltips 
   chart.options.tooltips.enabled = false;
  }
 },
 afterDraw: function(chart, easing) {
  if (chart.config.options.showAllTooltips) { // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once 
   if (!chart.allTooltipsOnce) {
    if (easing !== 1) return;
    chart.allTooltipsOnce = true;
   }
   chart.options.tooltips.enabled = true;
   Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
    tooltip.initialize();
    tooltip.update(); // we don't actually need this since we are not animating tooltips 
    tooltip.pivot();
    tooltip.transition(easing).draw();
   });
   chart.options.tooltips.enabled = false;
  }
 }
});

then pass showAllTooltips: true into options