Vue-Chartjs reactive chart options passing - vue.js

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
Hide all gridlines inculding x&y
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