Chartjs not rendering in navigation stack

Question

I am using Chart.js for Ionic. The charts load fine on the root page but for each page after the root page in the navigation stack the charts show up blank.

Here's the .ts code:

ionViewDidLoad()
{
    this.profile_donutCanvas = <HTMLCanvasElement> document.getElementById("profile_donutChart");
     this.profile_donutCtx = this.profile_donutCanvas.getContext('2d');
     this.profile_donutChart = new Chart(this.profile_donutCtx, {
        type: 'doughnut',
        data: {
            labels: ['', ''],
            datasets: [{
                data: [100, 0],
                backgroundColor: [
                    'rgba(182, 54, 235, 1)',
                    'rgba(255, 255, 255, 1)'
                ],
                borderWidth: 0
            }]
        },
        options: {
            cutoutPercentage: 95,
            legend:{
            display:false
         },
                    tooltips: {
                        enabled:false
                    }
                }
    });
}

and here's the .html code:

<canvas id="profile_donutChart" width="100" height="100" padding></canvas>

Does anybody know what could possibly cause this?

Thanks, Troy

Can you please make working copy to stackblitz.com?

Paresh Gami
– Paresh Gami

2018-06-27 05:13:36 +00:00
Commented Jun 27, 2018 at 5:13 — Paresh Gami
– Paresh Gami, Commented Jun 27, 2018 at 5:13

pmenze · Accepted Answer · 2018-06-27 07:01:15Z

1

I had similar difficulties using Chart.js in ionic (v3). I solved them using the ng2-charts package, see https://valor-software.com/ng2-charts/ which works fine ony any page of the navigation stack.

answered Jun 27, 2018 at 7:01

pmenze

381 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Chartjs not rendering in navigation stack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related