I'm trying to use Highcharts charting library in LWC. I have an empty
<div class="chart-target" lwc:dom="manual"></div> targeted by the chart. This works well.
The problem is that when the window is resized, the chart is not automatically reflown as it should be.
I've added a resize event listener to the
window in the
renderedCallback, which is being correctly called, as evidenced by console outputs. In the event listener, I've manually invoked the
reflow method on the chart. This should reflow the chart but seems to have no effect.
However, if I capture the console output of the variable pointing to a chart as a global variable in my browser's console and call
reflow on it (
temp1.reflow()), the chart is correctly reflown.
This reminds me of other JS libraries where a change done outside the library should be manually applied (for example,
scope.$apply in Angular).
What mechanism of LWC am I missing that would support such interactions?