0

I'm trying to use Highcharts charting library in LWC. I have an empty div element, <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?

0

I achieved the same using chart.ref.setSize(some dynamic width, some dynamic height, false) for angular 5. i thought it's also work in LWC

let chartMonthly = new Chart({
                chart: {
                    renderTo: '0',
                    //type: 'column',
                    // width: 508,
                    zoomType: 'x',
                    reflow: true


                },
                title: {
                    text: ''
                },
......
});

so here i defined chartMonthly as a variable Then i am going to set the size of chart using below code

reflowchart(event) {        
        setTimeout(() => {   
            var width = Some dynamic width 
            this.chartMonthly.ref.setSize(width, 400, false);
        }
```, 300);
    }
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.