How can I access the vue component instance inside callback of options.tooltips?

First of all, Thank You for this wonderful package 😍 . This package made my day ❤️ .

I’m in a situation where I need to construct the tooltip data using props. So I have used tooltips.callbacks.label option referred from docs.

Inside the label: function(tooltipItem,data){} I need to use props passed from the parent component, but what I’m getting is tooltip instance for this (As per the docs).

Is there any way to get VueComponet instance inside that function? Thanks in Advance 😃

Environment

• vue.js version: ^2.5.16
• vue-chart.js version: ^3.4.0
• npm version: 6.4.1

[apertureless]

¯_(ツ)_/¯

Just like I said:

So put your options in a computed property and use arrow functions and you should be fine.

https://codepen.io/apertureless/pen/BZKBdX

Instead of

label: function(tooltipItem,data){}

use

label: (tooltipItem, data) => {
}

[apertureless]

Well, this has nothing to to with either chart.js or vue-chartjs. Thats Javascript basics. this in callbacks always refers to the method that calls the callback. In this case this will refer to the window object / chartjs object and not to the vue compontent prototype.

There are enough resources and tutorials on how to handle this in callbacks.

The easiest way is to use arrow functions or .bind(this). So put your options in a computed property and use arrow functions and you should be fine.