title: Highcharts error 13, but rendering Div exists
body: <p>I am trying to implement Highcharts with this tutorial <a href="https://www.highcharts.com/docs/getting-started/your-first-chart" rel="nofollow noreferrer">https://www.highcharts.com/docs/getting-started/your-first-chart</a> but get this error:</p>
  
  <p><em>Uncaught (in promise) Error: Highcharts error #13: www.highcharts.com/errors/13</em></p>
  
  <p>It means the div does to render to doesn't exist, but I am pretty sure I have a div with the right class in my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.7/react-bootstrap.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
      &lt;script type="text/babel" src="/js/dashboard.js"&gt;&lt;/script&gt;
      &lt;!--link custom css file--&gt;
      &lt;link rel="stylesheet" type="text/css" href="/css/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;h1 class="text-center"&gt;Your Dashboard&lt;/h1&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-xs-7"&gt;
                  &lt;h3 class="text-center"&gt;Calories Today&lt;/h3&gt;
                  &lt;div class="top-left" id="cal-line"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-5"&gt;
                  &lt;h3 class="text-center"&gt;Calories Over Time&lt;/h3&gt;
                  &lt;div class="top-right" id="cal-today" style="width:100% height:400px;"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is my JS in /js/dashboard.js:</p>
  
  <pre><code>/*global React*/
  /*global ReactBootstrap*/
  /*global ReactDOM*/
  /*global fetch*/
  /*global location*/
  /*global Highcharts*/
  /*global $*/
  
  //variable to hold user data from API fetch
  let user = {};
  
  const fb_id = location.pathname.replace("/users/","");
  
  $(document).ready(function() {
  
  fetch("https://www.url.com/usersdata/" + fb_id)
          .then(rsp =&gt; rsp.json())
          .then(json =&gt; {
          //we fetched the user data    
              if(json.error &amp;&amp; json.error.message){
                  throw new Error(json.error.message);
              } 
  
              user = json;
              console.log(json);
  
              $(function(){
                 const myChart = Highcharts.chart('top-right',{
  
                   chart:{
                       type: 'bar'
                   },
                   title:{
                       text: 'Calories Over Time'
                   },
                   xAxis:{
                       categories: ['Apples', 'Bananas', 'Oranges']
                   },
                   yAxis:{
                       title:{
                           text: 'Fruit eaten'
                       }
                   },
                   series: [{
                       name: 'Jane',
                       data: [1,0,4]
                   },{
                       name: 'John',
                       data: [5,7,3]
                   }]
  
                 });
  
              });
  
          });
  
  });
  </code></pre>
  
  <p>Anyone can help me what I am doing wrong?</p>