this.$refs is undefined inside of hover events about vue-highcharts HOT 5 CLOSED

Try to use arrow function mouseOver: (e) => {}, or save this as vm like:

data() {
  const vm = this;
  return {
    // ...
    mouseOver(e) {
      console.log(vm.$refs);
    }
  }
}

from vue-highcharts.

Ah of course! I changed it to an arrow function and am able to retrieve this.$refs now. However now, when I look into the chart object, I don't see a text object or function inside of renderer.

events: {
  mouseOver: (e) => {
    const { chart } = this.$refs.highchartsRef;
    console.log(chart.renderer);
  }
}

This console log returns this inside of chart.renderer:

from vue-highcharts.

What's the version of Highcharts?
chart.renderer should be an intance of SVGRenderer, you can find more detail in documents.

from vue-highcharts.

I just installed it yesterday, so I have v8.2.2.

What's funny though is that when I console.log chart.renderer.text, it returns the function correctly, but nothing is being displayed in the center of the donut.

events: {
  mouseOver: (e) => {
    const { chart } = this.$refs.highchartsRef;
    console.log(chart.renderer.text);
    chart.renderer.text('40K Users', 100, 90);
  }
}

from vue-highcharts.

Ok I've got something displaying now by adding .css properties and calling .add(). I'll keep fiddling around with it to get it right, thanks so much for your help!

mouseOver: (e) => {
  const { chart } = this.$refs.highchartsRef;
  chart.renderer
    .text('40K Users', 100, 90, true)
    .css({
      color: '#f00',
      fontSize: '
    })
    .add();
},

from vue-highcharts.