clickAnnotation does not work? Or I use it wrong way?

[Zahovay]

<plotly-plot
        [divId] = "1"
        (clickAnnotation)="deleteAnnotation($event)"
        (plotlyClick)="newAnnotation($event)"
        class="plot-bar"
        [data]="timeSeries.data"
        [layout]="timeSeries.layout"
        [revision]="revision"
        [config]="timeSeries.config"
        [updateOnlyWithRevision] = true
        [useResizeHandler]="false"></plotly-plot>

  deleteAnnotation(event: any){
    console.log(event);
  }

var annotation = {
        text: this.typeOfAnnotation, //this is database text
        x: event.points[0].x,
        y: parseFloat(event.points[0].y.toPrecision(4)),
        arrowcolor: this.getAnnotationColor(), //returns a string color
        arrowhead: 20,
        font: {size:12},
        ay: -73
      }

I think I use something the wrong way, because everything else is working. This way plotlyclick is getting triggered when I click on any annotation I put on screen. Even when I try to click on annotations. Basically annotations are not clickable?

Angular version ~11

[andrefarzat]

@Zahovay not sure if is an angular-plotly.js issue or an plotly.js issue. I could see that the plotly_clickannotation (the one wrapped by (clickAnnotation)) needs the captureevents: true to be added to the annotation object. Could you check if adding it will make it work?

Source: plotly/plotly.js#1750 (comment)

[Zahovay]

@andrefarzat Thanks for your quick reply, I tried captureevents: true as well as adding editable:true as well as adding both, but this only makes the cursor change when hovering over the annotation text. Just to be sure I put the options where you think, it is now this:

var annotation = {
        text: this.typeOfAnnotation,
        x: event.points[0].x,
        y: parseFloat(event.points[0].y.toPrecision(4)),
        arrowcolor: this.getAnnotationColor(),
        arrowhead: 20,
        captureevents: true,
        editable: true,
        font: {size:12},
        ay: -73
      }

But does not trigger the clickAnnotation event when I click.
If I downgrade angular version, Should it work better? like is it tested under angular 10 or something? Do I miss something in my code?

[andrefarzat]

@Zahovay I created a quick demo here and could make it work (see image:)

Here is the code I used:

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'demo';

    public annotation = {
        text: 'Just a text',
        x: 0,
        y: 0,
        arrowcolor: 'blue',
        arrowhead: 20,
        captureevents: true,
        editable: true,
        font: { size: 12 },
        ay: -73
    }

    public graph = {
        data: [
            { x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+points', marker: { color: 'red' } },
            { x: [1, 2, 3], y: [2, 5, 3], type: 'bar' },
        ],
        layout: { width: 320, height: 240, title: 'A Fancy Plot', annotations: [this.annotation] }
    };


    public onClickAnnotation(event: any) {
        console.log('onClickAnnotation', event);
    }

    public onClick(event: any) {
        console.log('onClick', event);
    }
}

<plotly-plot [data]="graph.data" [layout]="graph.layout" (clickAnnotation)="onClickAnnotation($event)" (plotlyClick)="onClick($event)"></plotly-plot>

I am using angular 11.x , angular-plotly.js 4.x and PlotlyViaCDNModule with PlotlyViaCDNModule.setPlotlyVersion('1.55.2'). With this example, we can start digging into your code. Could you paste layout object within the annotations so we can replicated it better here?

[Zahovay]

Alright, changing to PlotlyViaCDNModule it simply works.

import * as PlotlyJS from 'plotly.js-dist';
import { PlotlyModule } from 'angular-plotly.js';

This example on the front page does not work.(FYI)
Thank you for your help, you guys are making an awesome job.

[andrefarzat]

@Zahovay we do have issues with the regular PlotlyModule. I think we could change the example code to avoid future issues. Thank you 😸