Zoomcharts's pie does not drill down to other levels on leaflet popup

Question

I am writing a simple app containing a leaflet map, a marker and a pie chart on marker popup. If I put the pie chart inside the popup It shows the pie chart but When I click on pie slices it is not going to sub-values, The code works when I put the pie chart in a simple page. Are there any predefined limits in leaflet popup? Thanks.




var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);;
var popup = L.popup().setContent("")
var marker = L.marker([51.5, -0.09]).bindPopup(popup).addTo(mymap);
marker.setPopupContent('')

chart= new PieChart({
    "pie": {
        "innerRadius": 0
    },
    "container": "demo",
    "data": [
        {
            "url": "https:\/\/zoomcharts.com\/data\/browsers-extended.json"
        }
    ],
    "toolbar": {
        "fullscreen": true,
        "enabled": true
    },
    "interaction": {
        "resizing": {
            "enabled": false
        }
    }
})
var htmltext = '<div>I am a standalone popup.</div> <hr><div id="test">loading chart</div>'
marker.on("click", onClick);
function onClick(e) {
  marker.setPopupContent(htmltext)
  var chart2 = new PieChart({
      "pie": {
          "innerRadius": 0
      },
      "container": "test",
      "data": [
          {
              "url": "https:\/\/zoomcharts.com\/data\/browsers-extended.json"
          }
      ],
      "toolbar": {
          "fullscreen": true,
          "enabled": true
      },
      "interaction": {
          "resizing": {
              "enabled": false
          }
      }
  })
}
#mapid { height: 500px; }
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>   
<script src="https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"></script>

<div id="demo"> Loading Pie Chart</div>
 <div id="mapid"></div>

score 0 · Answer 1 · answered Oct 20 '20 at 10:00

Apparently it's the leaflet pop up that is blocking events which are not accessing the donut in the popup. ZoomCharts comes with GeoChart component that natively lets you show donuts on map. Have a look: https://demo.zoomcharts.com/geo-chart/examples/charts-on-charts/nominal-gdp-sector-composition.html

It's also using Leaflet for the baselayer.

Zoomcharts's pie does not drill down to other levels on leaflet popup

1 Answers1