Chartjs-How can we build charts on Polymer 1.0 using Chart.js?

by

1👍

✅

The chart canvas doesn’t have width and height when you are initializing it.

The easiest way to fix it would be to just move it into the next tick with a setTimeout.

var self = this;
setTimeout(function() {
    self.chart = new Chart(self.ctx).Doughnut(self.data, self.options);
}, 0)

Plunkr – http://plnkr.co/edit/i3HrDxd5jUfTfLPVlNPg?p=preview

Note that if you are doing the same thing for line charts, the attributes need to be proper JSON (i.e. should use ” instead of ‘)

<chart-line width="400"
            height="200"
            labels='["Monday","Tuesday","Wednesday","thursday","Friday","Saturday","Sunday"]'
            values="[[10,14,20,25,13,9,40]]"
            colors='["253,180,92","247,70,74","70,191,189","148,159,177","77,83,96"]'>
</chart-line>

Plunkr – http://plnkr.co/edit/o74WRX404NWhHGiNqkC8?p=preview

Leave a comment