title: Polymer 1.0 Is there any ready made chart element?
body: <p>I want to add a pie chart in my Polymer 1.0 application. I used <code>chart-elements</code> with Polymer 0.5, but when migrated to 1.0 it stopped working!</p>
  <p>I did not find anything for 1.0 yet. Does 1.0 at all has a ready made chart element? Seeking for expert help.</p>
  <p>Thanks in advance.</p>
  <p><strong>EDIT</strong>
  According to Ben's suggestion I tried with <code>google-chart</code> component and this is what I did. But the chart is not rendering.</p>
  <p><strong>Step 1:</strong> I installed <code>google-chart</code> by using <code>bower install --save GoogleWebComponents/google-chart</code></p>
  <p><strong>Step 2:</strong> Created a custom element using <code>yo polymer:el custom-pie-chart</code> which looks like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;dom-module id="custom-pie-chart"&gt;
      &lt;style&gt;
          :host
          {
              display: -webkit-flex;
              display: -ms-flex;
              display: flex;
              margin: 0;
              padding: 0;
              width: 400px;
              height: 300px;
          }
          #chartdiv
          {
              width: 100%;
          }
          google-chart
          {
              height: 300px;
              width: 50em;
          }
      &lt;/style&gt;
      &lt;template&gt;
          &lt;link rel="stylesheet" href="custom-pie-chart.css"&gt;
          &lt;div id="chartdiv"&gt;
          &lt;google-chart
              type='pie'
              options='{"title": "Distribution of days in 2001Q1"}'
              cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
              rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'&gt;
          &lt;/google-chart&gt;
          &lt;/div&gt;
      &lt;/template&gt;
  &lt;/dom-module&gt;
  &lt;script&gt;
      (function () {
          Polymer({
              is: 'custom-pie-chart',
              ready: function () {
  
              }
          });
      })();
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Step 3</strong>: Added references of <code>google-chart</code> and my custom element <code>custom-pie-chart</code> in <code>elements.html</code></p>
  <p><strong>Step 4</strong>: Added <code>custom-pie-chart</code> in my index.html as follows:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;post-card id="sales-info" title="Points from customer"&gt;
    &lt;custom-pie-chart&gt;&lt;/custom-pie-chart&gt;
  &lt;/post-card&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But chart is not rendering. Area comes blank like this:</p>
  <p><a href="https://i.stack.imgur.com/rWEPo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rWEPo.png" alt="enter image description here" /></a></p>
  <p>NB: I am also getting the following error on console (Chrome)</p>
  <pre><code>Uncaught (in promise) TypeError: Request method 'POST' is unsupported
  at TypeError (native)
  at http://localhost:3000/bower_components/sw-toolbox/sw-toolbox.js:20:430
  </code></pre>
  <p>I removed all references of <code>google-chart</code> to check whether this is responsible. But it still comes up.</p>
  <p>What wrong I am doing? Please help!</p>