Charts being created with width and height 0, nothing get displayed using a web sample

[jiwidi]

I'm using the line char simple sample and i'm getting this error,this is my code:

            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,
                    }
                ]
            };
            //ctx.htmlItem[0].childNodes[0]
            options = {
                type: 'bar',
                data: {
                    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                    datasets: [{
                        label: '# of Votes',
                        data: [12, 19, 3, 5, 2, 3],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            }
            var myChart = new Chart(ctx.htmlItem[0].childNodes[0], {
                type: 'line',
                data: data,
                options: {
                    scales: {
                        xAxes: [{
                            display: false
                        }]
                    }
                }
            });

[etimberg]

This happens when the parent container has no size. Do you have a fiddle that reproduces this?

[jiwidi]

So i found that the chart doesn't fully render when the page is load so it doesn't finish and end in 0,0, i can solve it with a timeout but i don't want to implement that on my web, this is what happens to me: http://stackoverflow.com/questions/29403036/chart-js-not-showing-in-my-view , i got the canvas as the picture of theOP, any solutions? and can't give u a fiddle of this as the web is super super big,i'm working with web components

[jiwidi]

@etimberg i found that my main problem is that the instruction on the plugin :
me.controller = new Chart.Controller(me);

or

helpers.addResizeListener(context.canvas.parentNode, function() {
            if (me.controller && me.controller.config.options.responsive) {
                me.controller.resize();
            }
        });

resizes my canvas to 0 width and height, any ideas of why it does it, or how can i solve it?

[etimberg]

I think this is fixed in v2.4.0 but there isn't a test case to confirm that

[etimberg]

Closing since I believe this was fixed in v2.4.0