How to restyle a Plotly graph in Angular

Question

I have a plotly graph in a custom Angular component:

<plotly-plot [data]="graph.data" [layout]="graph.layout" (hover)="onHover($event)">
</plotly-plot>

I also have a slider, which I want to use to restyle the plot:

<mat-slider
 thumbLabel
 [displayWith]="formatLabel"
 tickInterval="1000"
 min="0"
 max="7000"
 (input)="getSliderVal($event)">
</mat-slider>

Currently I am registering the slider change events and redrawing whole graph, which is inefficient. I see there is (restyle) prop in the docs but I don't know how to use it. Any help appreciated!

Amuoeba · Accepted Answer · 2019-05-22 17:36:58Z

6

I think I have foound a way. In plotly.js docs it is specified to use .restyle() in the folowing way:

var update = {
    opacity: 0.4,
    'marker.color': 'red'
};
Plotly.restyle(graphDiv, update, 0);

So if you are using Angular you need to specify the plot div ID via [divId] like this:

<plotly-plot [data]="graph.data" [layout]="graph.layout" (hover)="onHover($event)" [divId]="embeddingsPlotID">

where embeddingsPlotID is specified in your component. Then you can call the .restyle() like this:

PlotlyModule.plotlyjs.restyle("embeddingsPlot",{"marker.size":event.value},0)

from your parent component. Sadly in my case this doesen't seem to be much of a speedup compared to redtawing a whole plot (I have cca. 3k points)

answered May 22, 2019 at 17:36

Amuoeba

8462 gold badges12 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Coder Over a year ago

for [divId]="embeddingsPlotID" , it should be added into parent div where the the traces are plotted ?

Muposat Over a year ago

One important detail is omitted: component variable this.embeddingsPlotID="embeddingsPlot";

Collectives™ on Stack Overflow

How to restyle a Plotly graph in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related