Back

World countries chart shapes only

Map chart with a shape layer that allows the user to click on countries and filter data.

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 
chart= new GeoChart({
    "layers": [
        {
            "id": "shapes",
            "type": "shapes",
            "data": {
                "id": "shapes"
            },
            "style": {
                "node": {
                    "fillColor": null,
                    "lineColor": "#2fc32f"
                }
            }
        }
    ],
    "background": {
        "enabled": true,
        "type": "tile",
        "url": "https://maps.zoomcharts.com/{z}/{x}/{y}.png",
        "params": {
            "attribution": "\u00a9 <a target='_blank' href='https://www.openstreetmap.org/copyright'\\>OpenStreetMap</a> contributors"
        }
    },
    "container": "demo",
    "data": [
        {
            "id": "shapes",
            "format": "GeoJSON",
            "url": "/dvsl/data/geo-chart/countries.geo.json",
            "perDrilldownData": false,
            "perZoomData": false,
            "perBoundsData": false
        }
    ],
    "interaction": {
        "resizing": {
            "enabled": false
        }
    }
})

Data

Data 
//Data too large to output
Download Data