This is driving me nuts.

I have a chart from vue-chart, chartData is loaded correctly, the chart displays correctly, but options are definitely not taken in account, despite setting them statically at the very end on renderChart call.

This is using vue2/chartjs 2.9.4/vue-chartjs 3.5.1.

<script>
  import { Line, mixins } from 'vue-chartjs'

  const {reactiveProp} = mixins;

  export default {
    extends: Line,
    mixins: [reactiveProp],
    mounted () {
      this.doRenderChart();
    },
    methods: {
      doRenderChart() {
        this.renderChart(this.chartData, {
          responsive: true,
          plugins: {
            title: {
              display: true,
              text: (ctx) => 'My Title'
            },
            tooltip: {
              mode: 'index'
            },
          },
        })
      }
    },
  }
</script>

Can anyone help?

Most of other similar topics are issues with {options: {actualoptions}} object, but here it is not the case.

Maybe a version issue? Using vue-chart 3.5.1 while other libs are in v2? But the doc doesn't specify anything about this.

Thanks for support

CodePudding user response：

You are using V3 syntax of chart.js while using V2 so that wont work. In V2 the title and tooltip config has to be at the root of your options object and tooltip has to be renamed to tooltips.

For all documentation you can read the V2 config to see where to specify things: https://www.chartjs.org/docs/2.9.4/

Or you can use the migration guide in reverse: https://www.chartjs.org/docs/master/getting-started/v3-migration.html