Custom plugin to show tooltips, how to add on hover event

[digitalforgeangelo]

I have made a custom plugin to always show the tooltips since that was what I needed.
The only thing I would like to have now is a on-hover action.

const alwaysShowTooltipPlugin = {
  id: 'alwaysShowTooltip',
  onHover: function (evt, item, legend) {
	console.log('hovered')
  },
  afterDraw(chart, args, options) {
	const { ctx } = chart
	ctx.save()
	
	chart.data.datasets.forEach((dataset, i) => {
	  chart.getDatasetMeta(i).data.forEach((datapoint, index) => {
		const { x, y } = datapoint.tooltipPosition();

		const text = dataset.label
		const textWidth = ctx.measureText(text).width

		ctx.fillStyle = 'rgba(0, 0, 0, 0.8)'
		ctx.fillRect(x - ((textWidth + 20) / 2), y - 40, textWidth + 20, 30)

		// Triangle
		ctx.beginPath()
		ctx.moveTo(x, y )
		ctx.lineTo(x - 5, y - 10)
		ctx.lineTo(x + 5, y - 10)
		ctx.fill()
		ctx.restore()

		// Text
		ctx.font = '14px Arial'
		ctx.fillStyle = 'white'
		ctx.fillText(text, x - (textWidth / 2), y - 19)
		ctx.restore()
	  })
	})
  },
}

How can I add a eventListener for a onClick so that I can use the data that was clicked on? The onHover I have currently does not work. It doesn't do anything at all.

I am using Nuxt by the way and Vue-ChartJS latest version which is basically just a wrapper around ChartJS.

[LeeLenaleee]

The plugins dont have their own onHover and onClick hooks. They do have event hooks like before and afterEvent: https://www.chartjs.org/docs/3.7.1/developers/plugins.html#event-handling

You can use these hooks to achieve what you want.
For an example of these hooks you can see this fiddle where I use them to log the hovered label:
https://jsfiddle.net/Leelenaleee/9zqxfn0y/36/

[digitalforgeangelo]

Hey LeeLenaleee, thank you so much for your answer! I tried to replicate what you did but unfortunately I am unable to get it working. I will keep trying to get it to work and I will post a reply very soon. Thanks again!

[digitalforgeangelo]

I tried to implement the code from your fiddle, but I am unable to get it working. s._labelItems and other items simply do not exist.

I can share my project if that helps, but like I said I wrote it in NuxtJS (Javascript). When I console log my event.chart.scales this is what I get in return:

Object { id: Getter & Setter, ctx: Getter & Setter, canvas: Getter & Setter, config: Getter & Setter, width: Getter & Setter, height: Getter & Setter, aspectRatio: Getter & Setter, options: Getter & Setter, _bufferedRender: Getter & Setter, chart: Getter & Setter, … }

​

__ob__: Object { value: {…}, dep: {…}, vmCount: 0 }
_bufferedRender: 
_bufferedRequest: null
_listeners: 
_plugins: 
active: Array []
animating: 
aspectRatio: 
boxes: 
canvas: 
chart: 
chartArea: 
config: 
controller: 
ctx: 
currentDevicePixelRatio: 
data: 
height: 
id: 
lastActive: 
legend: 
options: 
scales: 
titleBlock: 
tooltip: 
width: 
<get _bufferedRender()>: function reactiveGetter()
<set _bufferedRender()>: function reactiveSetter(newVal)
<get _listeners()>: function reactiveGetter()
<set _listeners()>: function reactiveSetter(newVal)
<get _plugins()>: function reactiveGetter()
<set _plugins()>: function reactiveSetter(newVal)
<get animating()>: function reactiveGetter()
<set animating()>: function reactiveSetter(newVal)
<get aspectRatio()>: function reactiveGetter()
<set aspectRatio()>: function reactiveSetter(newVal)
<get boxes()>: function reactiveGetter()
<set boxes()>: function reactiveSetter(newVal)
<get canvas()>: function reactiveGetter()
<set canvas()>: function reactiveSetter(newVal)
<get chart()>: function reactiveGetter()
<set chart()>: function reactiveSetter(newVal)
<get chartArea()>: function reactiveGetter()
<set chartArea()>: function reactiveSetter(newVal)
<get config()>: function reactiveGetter()
<set config()>: function reactiveSetter(newVal)
<get controller()>: function reactiveGetter()
<set controller()>: function reactiveSetter(newVal)
<get ctx()>: function reactiveGetter()
<set ctx()>: function reactiveSetter(newVal)
<get currentDevicePixelRatio()>: function reactiveGetter()
<set currentDevicePixelRatio()>: function reactiveSetter(newVal)
<get data()>: function get()
<set data()>: function set(value)
<get height()>: function reactiveGetter()
<set height()>: function reactiveSetter(newVal)
<get id()>: function reactiveGetter()
<set id()>: function reactiveSetter(newVal)
<get lastActive()>: function reactiveGetter()
<set lastActive()>: function reactiveSetter(newVal)
<get legend()>: function reactiveGetter()
<set legend()>: function reactiveSetter(newVal)
<get options()>: function reactiveGetter()
<set options()>: function reactiveSetter(newVal)
<get scales()>: function reactiveGetter()
<set scales()>: function reactiveSetter(newVal)
<get titleBlock()>: function reactiveGetter()
<set titleBlock()>: function reactiveSetter(newVal)
<get tooltip()>: function reactiveGetter()
<set tooltip()>: function reactiveSetter(newVal)
<get width()>: function reactiveGetter()
<set width()>: function reactiveSetter(newVal)
​
<prototype>: Object { construct: construct(item, config), initialize: initialize(), clear: clear(), … }
index.vue:1235

And in the "scales" object there is only this:

"x-axis-1": ​​
"y-axis-1":

And when I log the scale with your code:

const getLabelHitboxes = (scales) => {
    Object.values(scales).map((s) => {
        console.log(s)
    })
 };

I get this:

_ticks: ​
bottom:
chart:
ctx:
end:
fullWidth:
height:
hidden:
id:
labelRotation:
left:
longestTextCache:
margins:
max:
maxHeight:
maxWidth:
min:
minSize:
options:
paddingBottom:
paddingLeft:
paddingRight:
paddingTop:
position:
right:
start:
ticks:
ticksAsNumbers:
top:
weight:
width:
zeroLineIndex:

There is a id but no _labelItems or translation.

I included my project. Just run "npm install" once in the root then start the project with "npm run dev" and you can see it for your self. Most likely I am doing something wrong lol.

escapefromtarkovtools.com.zip

You also use chart.scales which does not exist on my end. I have to use chart.event.scales.

Best regards

[LeeLenaleee]

That's because my fiddle is for v3 and it seems from the scale IDs that you are using v2. So you will need to either update chart.js or rewrite it to be v2 compatible

[digitalforgeangelo]

Yeah, I just checked it and you are right indeed. My package.json says:

"vue-chartjs": "^3.4.0",
"chart.js": "^2.7.1"

I will try to upgrade it if I cannot get it to work properly :)