Triggering Hover Events

[vigorem]

Hi,

I'm trying to manualy trigger an hover event on my chart so it would display the tooltips for the last records on loading.

This is something documented in the official docs

var curve1 = Math.floor(Math.random()*2),
        curve2 = Math.floor(Math.random()*2),
        point1 = Math.floor(Math.random()*14),
        point2 = Math.floor(Math.random()*14);
Plotly.Fx.hover('myDiv',[
        {curveNumber:curve1, pointNumber:point1},
        {curveNumber:curve2, pointNumber:point2}
    ]);

but I'm having some difficulties on how to implement it with the vue-plotly component

<vue-plotly :data="data" :layout="layout" :options="options"/>

In advance, many thanks for the help

[cptnk]

You can add an ref to your component:

<vue-plotly v-show="display" :data="graphData" :layout="calculatedLayoutSizes" id="3dPlot"
            :display-mode-bar="false" ref="crazyPlotly"></vue-plotly>

then use the ref plotly events without the prefix within your mount point or similar method:

                this.$refs.crazyPlotly.$on('hover', d => {
                    d.points[0].data.marker.color = 'rgb(113, 176, 39)';
                    this.currentCurve = d.points[0].curveNumber;
                });

[ttmms]

@vigorem did you ever find out how to trigger hover event? I would like to know too!