Interoperability with polymer ?

[Andreas Baumann]

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

[Fernando Hurtado]

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

[Rob Dodson]

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

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 polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/5b1eaa48-9297-456b-bb3d-fd3737f085d1%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.