Troubleshooting Highcharts

When you’re ready to embed a chart, JSFiddle’s build in iframe tool is handy, but in the long run it isn’t what you want. Embedding Fiddles is fiddly, so instead of mastering JS Fiddle learn how to put a chart on your own page.

I put together some very useful Bootstrap templates including two Highcharts templates that are your best starting points. If your chart isn’t showing up where you think it ought to, try checking the following:

  • Did you place a <div..>…</div> on the page where you want the chart to appear?
  • Does your <div> have a descriptive, one word id? id="container" is not descriptive. id="time_to_leak" is.
  • Is your Highcharts function looking for the right id?
    $(function () {$('#oscar_night').highcharts({ is looking for a div with id="oscar_night"
  • Is your jquery call above your function? (By “jquery call” I mean the script tag that includes a minified copy of jQuery, probably from a content delivery network somewhere. Something like <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  • Is your highcharts call below your function? (That’s the line that pulls in Highcharts’ scripts <script src="//code.highcharts.com/highcharts.js"></script>)