title: Highcharts Showing Uncaught TypeError: Cannot read properties of undefined (reading 'chart')
body: <p>I've had this HighCharts spider chart working fine for a while now, but we upgraded to the latest HighCharts code and I noticed that the mouseovers are no longer working.  My PHP code looks like this:</p>
  <pre><code>    // Create a new Highchart
      $chart = new Highchart();
      $chart-&gt;includeExtraScripts();
  
      $chart-&gt;chart-&gt;renderTo = &quot;control_maturity_spider_chart&quot;;
      $chart-&gt;chart-&gt;polar = true;
      $chart-&gt;chart-&gt;type = &quot;line&quot;;
      $chart-&gt;chart-&gt;width = 1000;
      $chart-&gt;chart-&gt;height = 1000;
      $chart-&gt;title-&gt;text = &quot;Current vs Desired Maturity by Control Family&quot;;
      $chart-&gt;title-&gt;x = -80;
      $chart-&gt;pane-&gt;size = &quot;80%&quot;;
      $chart-&gt;xAxis-&gt;categories = $categories;
      $chart-&gt;xAxis-&gt;tickmarkPlacement = &quot;on&quot;;
      $chart-&gt;xAxis-&gt;lineWidth = 0;
      $chart-&gt;yAxis-&gt;gridLineInterpolation = &quot;polygon&quot;;
      $chart-&gt;yAxis-&gt;lineWidth = 0;
      $chart-&gt;yAxis-&gt;min = 0;
      $chart-&gt;yAxis-&gt;max = 5;
      $chart-&gt;yAxis-&gt;tickInterval = 1;
      $chart-&gt;tooltip-&gt;shared = true;
      $chart-&gt;tooltip-&gt;pointFormat = '&lt;span style=&quot;color:{series.color}&quot;&gt;{series.name}: &lt;b&gt;{point.y}&lt;/b&gt;&lt;br/&gt;';
      $chart-&gt;legend-&gt;align = &quot;center&quot;;
      $chart-&gt;legend-&gt;verticalAlign = &quot;top&quot;;
      $chart-&gt;legend-&gt;layout = &quot;vertical&quot;;
  
      // Draw the Current Maturity series
      $chart-&gt;series[0]-&gt;name = $escaper-&gt;escapeHtml($lang['CurrentControlMaturity']);
      $chart-&gt;series[0]-&gt;data = empty($categories_current_maturity_average) ? [] : $categories_current_maturity_average;
      $chart-&gt;series[0]-&gt;pointPlacement = &quot;on&quot;;
  
      // Draw the Desired Maturity series
      $chart-&gt;series[1]-&gt;name = $escaper-&gt;escapeHtml($lang['DesiredControlMaturity']);
      $chart-&gt;series[1]-&gt;data = empty($categories_desired_maturity_average) ? [] : $categories_desired_maturity_average;
      $chart-&gt;series[1]-&gt;pointPlacement = &quot;on&quot;;
  
      $chart-&gt;credits-&gt;enabled = false;
  
      echo &quot;&lt;figure class=\&quot;highcharts-figure\&quot;&gt;\n&quot;;
      echo &quot;  &lt;div id=\&quot;control_maturity_spider_chart\&quot;&gt;&lt;/div&gt;\n&quot;;
      echo &quot;&lt;/figure&gt;\n&quot;;
  
      echo &quot;&lt;script type=\&quot;text/javascript\&quot;&gt;&quot;;
      echo $chart-&gt;render(&quot;control_maturity_spider_chart&quot;);
      echo &quot;&lt;/script&gt;\n&quot;;
  </code></pre>
  <p>The actual chart renders just fine, but if you mouse over it, you just get this message in the javascript console over and over again:</p>
  <p><a href="https://i.stack.imgur.com/JBIC4.png" rel="nofollow noreferrer">HighCharts Error Message</a></p>
  <p>If we comment out these two lines of code, the mouseover works:</p>
  <pre><code>    $chart-&gt;tooltip-&gt;shared = true;
      $chart-&gt;tooltip-&gt;pointFormat = '&lt;span style=&quot;color:{series.color}&quot;&gt;{series.name}: &lt;b&gt;{point.y}&lt;/b&gt;&lt;br/&gt;';
  </code></pre>
  <p>Any thoughts on what we are doing wrong here, or what changed, would be greatly appreciated.  Thank you.</p>