title: Trying to create Highcharts element in Polymer
body: <p>I am trying to create a polymer custom element to display a Highchart and getting this error: </p>
  
  <blockquote>
    <p>'Highcharts Error #13 Rendering div not found</p>
  </blockquote>
  
  <p>This error occurs if the <code>chart.renderTo</code> option is misconfigured so that Highcharts is unable to find the HTML element to render the chart in.'</p>
  
  <p>Can anyone please explain how to load the chart into the template div id="container"? Any links to working highcharts/polymer elements greatly appreciated :)</p>
  
  <p>My code (I'm using polymer starter kit so linking to polymer/webcomponents from  the elements.html and have  in index.html):</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  
  &lt;dom-module id="my-chart"&gt;
      &lt;template&gt;
          &lt;div id="container" style="max-width: 600px; height: 360px;"&gt;&lt;/div&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
          Polymer({
          is: "my-chart",
          ready: new Highcharts.Chart({
              chart: {
                  type: 'bar',
                  renderTo: 'container'
              },
              title: {text:  'HI'},
              xAxis: {
                  categories: ['London', 'Paris', 'Madrid']
              },
              yAxis: {
                  title: {
                      text: 'Sales'
                  }
              },
              series: [{
                  name: 'Cities',
                  data: [1000, 2500, 1500]
              }]
          })
      });
      &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>New code: </p>
  
  <pre><code>&lt;dom-module id="my-chart"&gt;
      &lt;template&gt;
          &lt;div id="container" style="max-width: 600px; height: 360px;"&gt;&lt;/div&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
          Polymer({
          is: "my-chart",
          ready: function() {
  
              var el = new Highcharts.Chart
  
          ({
              chart: {
                  type: 'bar',
                  // renderTo: 'container'
              },
              title: {text:  'HI'},
              xAxis: {
                  categories: ['London', 'Paris', 'Madrid']
              },
              yAxis: {
                  title: {
                      text: 'Sales'
                  }
              },
              series: [{
                  name: 'Cities',
                  data: [1000, 2500, 1500]
              }]
          })
              this.$.container.appendChild(el);
         }
       });
      &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>