Popular posts

Thanks. I have tried something similar, with Vue:

In ready():

window.addEventListener('resize', this.redraw);

redraw() {
    console.log('redrawing..');
    this.chart.destroy();

    this.chart = new Chart(
        this.$el.getContext('2d'),
        {
            type: this.type,
            data: this.data,
            maintainAspectRatio: false,
            options: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    ); 
}

But that doesn't seem to work.. I don't know if I'm missing some key part completely because I haven't been able to find a solution for days.

replace your redraw function with, console.log('it works');

If I can I'll prep a codepen for you later.

How about context? Inside this.redraw, is this.chart and this.$el even a thing? Maybe you need to pass this.redraw.bind(this) to addEventListener

this.$el is a VueJS specific thing. I think I have nailed some of it now, it currently don't understand when I resize the container, only the window, but ChartJS is f* bugged in this responsive thing. I used the .destroy() but it had leftover junk I had to remove manually.

this.chart.destroy();
this.$el.childNodes[0].nextSibling.removeAttribute('width');
this.$el.childNodes[0].nextSibling.removeAttribute('height');
this.$el.childNodes[0].nextSibling.removeAttribute('style');

if (this.timeoutHandle)
    window.clearTimeout(this.timeoutHandle);

this.timeoutHandle = window.setTimeout(this.draw, 250);

this.$el.childNodes[0].nextSibling is a reference to the canvas