Map Chart Hover Issue
Hover won't work if chart container is scaled.
by YeongCY
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"></script>
<content>
<div id="demo"></div>
</content>
CSS
#demo {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
transform: scale(0.5);
}
JavaScript
chart= new GeoChart({
"navigation": {
"initialLat": 37,
"initialLng": -95,
"initialZoom": 4,
"minZoom": 3,
"maxZoom": 12
},
"layers": [
{
"type": "items",
"style": {
"nodeStyleFunction": function (node) {
node.label = node.data.name;
var pop = node.data.population / 20000;
if(pop < 6) {
pop = 6;
}
node.radius = pop;
node.fillColor = "#b0dc0b";
node.lineColor = "#2fc32f";
node.lineWidth = 1;
node.labelStyle = {
backgroundStyle: {
fillColor:"#eab404",
lineColor:"#de672c",
lineWidth:1
},
textStyle: {
fillColor: "#de672c"
}
}
}
}
}
],
"container": "demo",
"data": [
{
"url": "https:\/\/zoomcharts.com\/data\/usa-largest-capitals.json"
}
],
"interaction": {
"resizing": {
"enabled": false
}
}
})