Hey there! Let's get your grid lines hidden and tooltip working as expected—reactive Vue-Chartjs absolutely supports passing custom options, you just need to adjust how you handle them in your components.

What Went Wrong #

1. In your chart.js component, you defined an options prop but didn't actually use it when calling renderChart()—you hardcoded the scales config instead.
2. Your parent chart.vue component wasn't passing any options down to the line-chart child component at all.

Step 1: Update the Chart Component (chart.js) #

We'll modify this component to merge default options with any custom options passed from the parent, so you get consistent defaults while retaining flexibility:

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

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: {
    options: {
      type: Object,
      default: () => ({})
    }
  },
  mounted () {
    // Set up default options (hide grid lines)
    const defaultOptions = {
      scales: {
        xAxes: [{ gridLines: { display: false } }],
        yAxes: [{ gridLines: { display: false } }]
      },
      tooltips: {
        // Base tooltip config for "always show on hover" behavior
        mode: 'index',
        intersect: false,
        enabled: true
      }
    }

    // Merge defaults with parent-provided options
    const mergedOptions = { ...defaultOptions, ...this.options }
    this.renderChart(this.chartData, mergedOptions)
  }
}

Step 2: Update the Parent Component (chart.vue) #

Now pass your custom tooltip options down to the child component, and clean up any misplaced config (your gridLines was inside datacollection where it doesn't belong):

<template>
  <div style="background:#fff;">
    <!-- Pass both chart data and options to the child -->
    <line-chart :chart-data="datacollection" :options="chartOptions"></line-chart>
    <button @click="fillData()">Randomize</button>
  </div>
</template>

<script>
import LineChart from './chart'
export default {
  components: { LineChart },
  data () {
    return {
      datacollection: null,
      chartOptions: {
        tooltips: {
          // For true "always visible" tooltip (not just hover), use a custom plugin
          // But for persistent hover tooltips, this works:
          mode: 'index',
          intersect: false,
          // If you want tooltips to stay visible without hovering, add a custom plugin here
        }
      }
    }
  },
  mounted () {
    this.styling()
    this.fillData()
  },
  methods: {
    fillData () {
      this.datacollection = {
        labels: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()],
        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>

Bonus: Always-Visible Tooltip (No Hover Required) #

If you want tooltips to stay visible without needing to hover, you'll need a custom Chart.js plugin. Add this to your chartOptions:

chartOptions: {
  plugins: {
    tooltip: {
      enabled: false, // Disable default tooltip
      external: function(context) {
        // Custom tooltip rendering logic here
        // For example, create a DOM element and update it with tooltip content on render
      }
    }
  }
}

Note: This requires more custom code to handle positioning and content—check Chart.js's tooltip plugin docs for details tailored to your version.

Key Notes #

• Double-check your Vue-Chartjs and Chart.js version compatibility: Vue-Chartjs v3 uses Chart.js v3, which moved tooltip config under plugins.tooltip instead of the root tooltips object.
• Merging options ensures your defaults stay intact while allowing parent components to override specific settings.

内容的提问来源于stack exchange，提问作者Atom