title: How can we build charts on Polymer 1.0 using Chart.js?
body: <p>I wonder if we have readily available chart elements for polymer 1.0. I am trying to migrate chart-doughnut (<a href="https://github.com/robdodson/chart-elements/" rel="nofollow">https://github.com/robdodson/chart-elements/</a>) from polymer 0.5 to 1.0 which uses Chart.js script.</p>
  
  <p>I have migrated the chart-doughnut.html file in following way :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;link rel="import" href="bower_components/polymer/polymer.html"&gt;
    &lt;link rel="import" href="chart-js-import.html"&gt;
    
    &lt;!--
    Pie and doughnut charts are probably the most commonly used chart there are. They are divided into segments, the arc of each segment shows a the proportional value of each piece of data.
    
    They are excellent at showing the relational proportions between data.
    
    Pie and doughnut charts in are effectively the same class in Chart.js, but have one different default value - their percentageInnerCutout. This equates what percentage of the inner should be cut out. This defaults to 0 for pie charts, and 50 for doughnuts.
    
    They are also registered under two aliases in the Chart core. Other than their different default value, and different alias, they are exactly the same.
    
    ##### Example
    
        &lt;chart-doughnut values="[30, 50, 100, 40, 120]"&gt;&lt;/chart-doughnut&gt;
    
    @element chart-doughnut
    @blurb A chart for showing the relational proportions between data.
    @status alpha
    @homepage http://robdodson.github.io/chart-elements
    --&gt;
    &lt;dom-module id="chart-doughnut"&gt;
      &lt;template&gt;
        &lt;canvas id="canvas" width="{{width}}" height="{{height}}"&gt;&lt;/canvas&gt;
      &lt;/template&gt;
    &lt;script&gt;
      Polymer({
        is: 'chart-doughnut',
        properties: {
          colors: {
            type: Array,
            value: ['#F7464A',
                '#46BFBD',
                '#FDB45C',
                '#949FB1',
                '#4D5360'
              ];
            },
            notify: true,
            observer: 'updateChart'
          },
          height: {
            notify: true,
            observer: 'resize'
          },
          options: {
            type: Object,
            value: {};
            },
            notify: true,
            observer: 'updateChart'
          },
          values: {
            type: Array,
            value: [
                30,
                50,
                100,
                40,
                120
              ];
            },
            notify: true,
            observer: 'updateChart'
          },
          width: {
            notify: true,
            observer: 'resize'
          }
        },
        resize: function () {
          if (this.chart) {
            this.updateChart();
          }
        },
        updateChart: function () {
          this.async(function () {
            if (this.chart) {
              console.log("CHARTTTT"+this.chart);
              this.chart.destroy();  // Bindings don't seem to be taking effect properly so
                                     // manually set width and height
              // Bindings don't seem to be taking effect properly so
              // manually set width and height
              this.$.canvas.setAttribute('width', this.width);
              this.$.canvas.setAttribute('height', this.height);
            }
            this.data = [];
            this.values.forEach(function (val, i) {
              this.data.push({
                color: this.colors[i],
                value: val
              });
            }, this);
            this.ctx = this.$.canvas.getContext('2d');
            this.chart = new Chart(this.ctx).Doughnut(this.data, this.options);
          }, null, 0);
        }
      });
    &lt;/script&gt;
     &lt;/dom-module&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But on using it, i am getting the below error in Chart.js</p>
  
  <blockquote>
    <p>Uncaught IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-0.5) is negative.
    Chart.js:1226 0   0  -0.5  4.71238898038469   4.713461589614612</p>
  </blockquote>
  
  <p>pls suggest.</p>