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

[theenadayalank]

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]

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.

[ivanvorona]

@theenadayalank - did you get a chance to implement this? if so, would you mind sharing the code.

[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) => {
}

[ivanvorona]

@apertureless it helped, thank you! quick question - i see you are passing currency prop in your example with options. I need to pass another prop to component but for datacollection calculations without passing whole data prop itself. Would you mind sharing what is the best way to do this? let me know if you want me to share the code.

[apertureless]

I don't really understand what you want to achieve.
Please provide an example.

[ivanvorona]

@apertureless from your example: https://codepen.io/apertureless/pen/BZKBdX
i want currency (<line-chart currency="€":chart-data="message" :width="400" :height="200">) to be used in data/function call - data: [this.getRandomInt(this.currency)....

[apertureless]

This will not work. You can't access props in your data.
Just use a computed property.

[ivanvorona]

@apertureless any plans/workaround to improve this? the use case for your example would be - i have the same chart for different currencies and i want to derive data in my datacollection based on the prop as the filter and show all charts on the same page:
<line-chart currency="EUR":chart-data="message" :width="400" :height="200">
<line-chart currency="USD":chart-data="message" :width="400" :height="200">
<line-chart currency="CAD":chart-data="message" :width="400" :height="200">

[ivanvorona]

Hi @apertureless - any word on this one? it doesn't look efficient to duplicate datacollection multiple times just because we can't pass this prop to filter the data. I am sure there is a way to do it more efficient - i just don't know it and i guess you are the best person to help with it :)