JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>Leaflet Popup + Chart</title>

  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />
  <!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.ie.css" />
  <![endif]-->
  <style>
    #map {
      width: 800px; 
      height: 600px; 
    }
  </style>

  <script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
  
  <!-- raphy charts dependencies -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
  <script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
  <!-- raphy charts -->
  <script src="https://raw.github.com/jcarver989/raphy-charts/master/compiled/charts.min.js"></script>
</head>
<body>

  <div id="map"></div>

  <script>
    var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
      key: 'BC9A493B41014CAABB98F0471D759707'
    });
    var map = L.map('map')
        .setView([50.5, 30.51], 15)
        .addLayer(cloudmade);

    var markers = new L.FeatureGroup();
    // single marker on the map
    var m = new L.Marker([50.5, 30.51]);
    // click event handler to creat a chart and show it in the popup
    m.on("click", function() {
      var div = $('<div style="width: 200px; height: 200px;"></div>')[0];
      m.bindPopup(div);
      m.openPopup();
      var chart = new Charts.CircleProgress(div, "", 50, {
        font_color: "#fff",
        fill_color: "#222",
        stroke_color: "#4591C9"
      });
      chart.draw();
    });

    markers.addLayer(m);
    map.addLayer(markers);
  </script>
</body>
</html>