Tengo este gráfico de líneas en el que muestro una información sobre herramientas compartida de todas las series en el lado derecho del gráfico. Sin embargo, en la vista móvil, se ve feo porque la mitad del espacio de la pantalla lo ocupa el gráfico y la otra mitad la información sobre herramientas. En el diseño de respuesta móvil, quiero que el gráfico ocupe todo el ancho de la pantalla y la información sobre herramientas compartida para ir al final del gráfico. ¿Cómo puedo conseguir esto?

He escrito el código a continuación y funciona en jsfiddle.

 responsive: { rules: [{ chartOptions: { chart: { marginRight: 0 }, tooltip: { outside: true, positioner: function(boxWidth, boxHeight, point) { var chart = this.chart; // get plotTop; return { x: chart.plotLeft + chart.plotSizeX - 100, y: chart.chartHeight - chart.plotTop - chart.xAxis[0].bottom + boxHeight + 50 }; } } }, condition: { maxWidth: 640 } }] }

https://jsfiddle.net/userMB/k790c4rw/4/

Pero el problema es que mi gráfico está encerrado dentro de un contenedor div que está encerrado dentro de una sección. Al igual que el código a continuación: Por lo tanto, la información sobre herramientas no se muestra debajo del gráfico como yo quiero. ¿Alguna idea de cómo puedo lograr esto?

 <section class="section section-lg "> <div class="container" style="max-width: 95vw; border: 1px solid grey; min-height: 65vh;"> <"some form"> <div id="chart" style="min-height: 50vh;"></div> </div> <section>

Y ese mismo código se comporta de manera diferente dentro de los elementos de sección y div encerrados. ver https://jsfiddle.net/userMB/k790c4rw/10