Estoy usando gráficos altos en mi aplicación angular. Dentro del gráfico, coloqué un botón personalizado para llevar al usuario a una nueva página.

El problema es que, cuando abro el gráfico en pantalla completa, usando el menú de exportación, la ubicación del botón personalizado está solo en la ubicación original. No cambia su posición con las dimensiones del gráfico, es decir, si las dimensiones del gráfico aumentan de 500x500 a 1280x1000, el botón no se mueve en consecuencia.

antes de entrar en pantalla completa

durante pantalla completa

Coloco el botón en el gráfico usando event.render. Realmente necesito:

1. renderice los botones nuevamente en el evento de pantalla completa y salga del evento de pantalla completa.
2. cambie la alineación de los botones para que siempre estén alineados en la parte superior derecha (agregando margen para que no se superpongan con el botón de exportación).
3. algo completamente diferente, como dejar de programar

Código para agregar botón al gráfico :

 public static donutChartOptions: Options{ chart: { type: 'donut', events: { render(events) { let chartVal = this; chartVal.renderer .button('View Full Report', 460, 8, (e) => {}) .attr({ zIndex: 3, }) .on('click', function () { window.location.href = '#/home/viewDistribution'; }) .add(); } }, } }