asyncWidget with chart data not showing anything

[shakhawat hossain sabbir]

I have chartjs chart in my widget , if i called it @widget it works fine but when i try to load it via @asyncWidget it does not work . currently i only have static data in chart

[Sebastien HEYD]

When chartjs is called your widget is not already loaded in the DOM, that's why it does not work by using @asyncWidget.

There is some solutions : initialize chartjs in the widget directly, using MutationObserver to trigger chartjs when element is loaded, using interval, ...

[shakhawat hossain sabbir]

currently I'm doing int this way

    var ctx = document.getElementById("bar_chart_average_IA_Area");
    ctx.height = 110;
    new Chart(document.getElementById("bar_chart_average_IA_Area"), {

    type: 'bar',
            data: {
            labels: ["Sherpur","Dhaka","Chittagong","Feni"],
                    datasets: [
                        {
                                label: "W1",
                                backgroundColor: "#4472c4",
                                data: [10,20,30,40]
                                }, {
                                label: "W2",
                                backgroundColor: "#ed7d31",
                                data: [20,30,40,50]
                                }, 
                                {
                                label: "W3",
                                backgroundColor: "#a5a5a5",
                                data: [20,49,50,44]
                                },
                                {
                                label: "W4",
                                backgroundColor: "#ffc000",
                                data: [34,55,45,66]
                                }
                    ]
            },
            options: {
                showAllTooltips: true,
                 scales: {
                        yAxes: [{
                                maxBarThickness: 50,
                        }]
                },
            plugins: {
            labels: false, 
            },
                    title: {
                    display: true,
                            text: 'Average IA'
                    }
            }
    });