How to trigger events like "hover" ?

[Mathijs003]

Hi, I was wondering how that we could trigger events such like "hover" programatically on the graph?

It is described here in the documentation :
https://plot.ly/javascript/hover-events/#triggering-hover-events

Thanks!

[Mathijs003]

I've found that you can get the plotly instance and call
this.plotlyService.getPlotly().Fx.hover(.....)
But whenever I enter and ID that I give to the plotly component using
<plotly-plot [divId]="..." </plotly-plot>
it says
No DOM element with id 'test' exists on the page.

[andrefarzat]

@Mathijs003 this is an scenario we haven't predicted. You get it correctly doing this.plotlyService.getPlotly().Fx.hover(), but it should also work doing with divId. Maybe you did <plotly-plot [divId]="test"> instead of <plotly-plot divId="test"> ?
in meanwhile, I will test here too to see if I can have the expected behaviour

[Mathijs003]

@andrefarzat
It seems that <plotly-plot divId="test"> is working using this.plotlyService.getPlotly().Fx.hover('test', [{curveNumber:0, pointNumber:<<x-value>>}])

Thanks a lot for your response!

[ivenugopal]

Can someone help me to convert this code in Angular typescript.

Plotly.newPlot('graph', [{
type: 'bar',
orientation: 'h',
y: ['A', 'B', 'C', 'D'],
x: [1, 2, 3, 1]
}, {
type: 'bar',
orientation: 'h',
y: ['A', 'B', 'C', 'D'],
x: [3, 4, 1, 2]
}], {
clickmode: 'select+event'
}).then(gd => {
gd.on('plotly_selected', d => {
if(d && d.points) {
var pts = d.points.map(p => p.pointNumber)
Plotly.restyle(gd, 'selectedpoints', [pts, pts]);
}
})
})

<plotly-plot [data]="barGraph.data" [layout]="barGraph.layout" (selected)="pointsSelect($event)" [style]="{overflow:visible}" divId="test">

I am a newbie using Angular as well as plotly but not sure how to convert this in angular. Any help will be very much appreciated.

Thanks in Advance.

[AnurupMondal]

Can someone help me to convert this code in Angular typescript.

Plotly.newPlot('graph', [{ type: 'bar', orientation: 'h', y: ['A', 'B', 'C', 'D'], x: [1, 2, 3, 1] }, { type: 'bar', orientation: 'h', y: ['A', 'B', 'C', 'D'], x: [3, 4, 1, 2] }], { clickmode: 'select+event' }).then(gd => { gd.on('plotly_selected', d => { if(d && d.points) { var pts = d.points.map(p => p.pointNumber) Plotly.restyle(gd, 'selectedpoints', [pts, pts]); } }) })

<plotly-plot [data]="barGraph.data" [layout]="barGraph.layout" (selected)="pointsSelect($event)" [style]="{overflow:visible}" divId="test">

I am a newbie using Angular as well as plotly but not sure how to convert this in angular. Any help will be very much appreciated.

Thanks in Advance.

import { Component, OnInit } from '@angular/core';
import { Plotly } from 'angular-plotly.js';

@component({
selector: 'app-your-plot',
template: <plotly-plot [data]="data" [layout]="layout" [config]="config" (plotly_selecting)="onSelecting($event)" divId="test" style="overflow: visible;"></plotly-plot>
})
export class YourPlotComponent implements OnInit {
data = [{
type: 'bar',
orientation: 'h',
y: ['A', 'B', 'C', 'D'],
x: [1, 2, 3, 1]
}, {
type: 'bar',
orientation: 'h',
y: ['A', 'B', 'C', 'D'],
x: [3, 4, 1, 2]
}];

layout = {
clickmode: 'select+event'
};

config = {};

ngOnInit() {}

onSelecting(event: any) {
if (event && event.points) {
const pts = event.points.map(p => p.pointNumber);
Plotly.restyle('test', 'selectedpoints', [pts, pts]);
}
}
}

See is this works!