Adding A Highchart To A Leaflet Popup

I'm currently working on a project where the map I create displays all communities the akdatagateway tracks and when a marker is clicked a popup opens displaying a highchart of the

Solution 1:

It looks like your code should work, so without a full reproducible example, it's tough to troubleshoot. So, instead I'll offer a working example:

var popup = L.popup().setContent('<p style="font-size:130%;"><b>Some Name</b></p><div id="container" style="min-width: 300px; height: 200px; margin: 0 auto">Loading...</div>');

L.circle([51.49, -0.09], 500, {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5
}).addTo(map).bindPopup(popup);


map.on('popupopen', function(e) {
  $.ajax({
      type: "GET",
      url: "data.json"
    })
    .done(function(data) {
      $('#container').highcharts({
        chart: {height: 175, width: 295},
        title: {text: ''},
        series: data
      });
    });
});

map.on('popupclose', function(e){
  $('#container').html("Loading...");
});

Also, I'd warn you not to make async: false calls. Not only is it deprecated, but it can make for a poor user experience and it's totally unnecessary here.

Complete code sample is runnable here.