Chart.js not rendering unless i set a timeout

Question

Well, i have the same issue that this guy: Chart.js not showing in my view , for him it solved to set a timeout but for me that's no even possible to introduce in my web, i don't want to work with timeouts.I'm working to create web-components for chart.js.There's any way to wait the chart to get render without setting a timeout?, that the waiting time is the render time

My code is:

flexygo.ui.wc.flxChart = function () {

    return {
        htmlItem: null,

        moduleId: null,

        refresh: function () {

            this.init();
        },



        init: function () {
            var ctx = this;

            ctx.htmlItem.html('<canvas id="myChart2" height="400" width="800" style="width:800px;height:400px;"></canvas>'); 

            ctx.render();
        },
        render: function () {
            var ctx = this;


            var data = {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [{
                    label: "My First dataset",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(75,192,192,0.4)",
                    borderColor: "rgba(75,192,192,1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(75,192,192,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: [65, 59, 80, 81, 56, 55, 40],
                    spanGaps: false,
                }]
            };
            window.onload = function () {
                    var myChart = new Chart(ctx.htmlItem[0].childNodes[0], {
                    type: 'line',
                    data: data,
                    options: {
                        scales: {
                            xAxes: [{
                                display: false
                            }]
                        }
                    }
                });
            }
        },

        translate: function (str) {
            return flexygo.localization.translate(str);
        },
        startLoading: function () {
            this.htmlItem.parents('flx-module').find('.icon-sincronize').addClass('icon-spin txt-outstanding');
        },
        stopLoading: function () {
            this.htmlItem.parents('flx-module').find('.icon-sincronize').removeClass('icon-spin txt-outstanding');
        },

    }

creating the chart we can use either htmlitem[0].childnodes[0] or document.getElementById('myChart2')

Answer 1

i solved it adding encapsulating the canvar into a div, so the canva resizes with my page, i changed:

from:

ctx.htmlItem.html('<canvas id="myChart2" height="400" width="800" style="width:800px;height:400px;"></canvas>'); 

to

ctx.htmlItem.html('<div><canvas id="myChart2" height="400" width="800" style="width:800px;height:400px;"></canvas></div>'); 

a now it works