It seems like setting the width and height of the canvas element in CSS doesn't actually affect the sizing of the chart. You need to set width and height with attributes on the canvas element itself. Here's an example of how you could do that with polymer: https://gist.github.com/c58b92e81fb4fecd3037
On Thu, Jul 31, 2014 at 7:39 AM, Fernando Hurtado < [email protected]> wrote: > Hi Anreas, > > I've been using ChartJs and Polymer without any problem. The only 'trick' > part is setting right dimensions for the canvas. Maybe more context on your > case should help. > > Héctor Fernando > > > > El jueves, 31 de julio de 2014 04:22:20 UTC-5, Andreas Baumann escribió: > >> Hi, >> >> I build my first polymer components. The standalone versions (only >> working with simple html elements) are working without problems. After that >> I tried to use polymer to create components with the use of other >> frameworks. >> I trie to create a doughnut chart element using Chart.js Framework. >> >> <link rel="import" href="bower_components/polymer/polymer.html"> >> >> >> <polymer-element name="doughnut-chart" attributes="doughnutChartData >> title"> >> >> <template> >> >> <style> >> #chart{ >> width: 180px; >> height: 180px; >> background-color: rgba(33, 67, 116, 0.74) >> } >> #chartTitle{ >> color:#eee; text-align: center; font-size: 10px; >> } >> >> >> </style> >> >> <div id="chart" > >> <div id="chartTitle">{{title}}</div> >> <canvas id="doughnutChart" width="100" height=100" ></canvas> >> </div> >> </template> >> <script> >> >> Polymer('doughnut-chart',{ >> >> domReady:function(){ >> >> var ctx = this.$.doughnutChart.getContext("2d"); >> this.doughnutChartData = doughnutChartData; >> this.chartHeight = Number(this.height) + 35; >> this.chartWidth = Number(this.width) + 25; >> this.myDoughnutChart = new >> Chart(ctx).Doughnut(this.doughnutChartData, >> { >> responsive : true, >> animation: false, >> showScale:false >> >> }); >> >> >> } >> >> }); >> </script> >> </polymer-element>. >> >> The doughnut chart is shown but the scaling of the chart is not correct ! >> It looks like that the Chart.js framework works inside a template (inside >> the shadow dom) not in the same way as in a normal (without polymer) way. >> What can I do to change this behavior ? >> >> Best regards >> >> Andreas >> >> Follow Polymer on Google+: plus.google.com/107187849809354688692 > --- > You received this message because you are subscribed to the Google Groups > "Polymer" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/5b1eaa48-9297-456b-bb3d-fd3737f085d1%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/5b1eaa48-9297-456b-bb3d-fd3737f085d1%40googlegroups.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/d/optout. > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAJj5OwDFGWuXP-gCiQr8yBGieRwK8P0X78vpkcZ-r2sbZqt6%2BA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
