I am trying to convert a plotly plot to an iamge in order to add it afterwards in a pdf. what i have is the following code:
import { PlotlyComponent, PlotlyService } from 'angular-plotly.js';
@ViewChild('plot') plot: PlotlyComponent;
public async createGraph($event) {
let pl = await this.plotlyService.getPlotly();
let img = await pl.toImage(this.plot, { format: 'png' }); //this is causing the overflow
//then getting the url of the image
}
the issue now is: for some reason i noticed that plotly.toImage is adding some extra divs in the DOM causing an overflow on the screen. I tried to use other libraries like htmlToImage to convert the graph to an image and then get the url but this is causing other issues regarding dimensions, quality, etc. Is there any way to avoid the extra divs the library is creating ? css styling with overflow hidden wont work.