JSFiddle - React, Tailwind, and code Playground

by Nicholas Mastracchio

HTML

<script src="http://cdn.zingchart.com/zingchart-core.min.js"></script>

    
    <script>
        zingchart.MODULESDIR="http://cdn.zingchart.com/modules/";
        zingchart.loadModules('maps,maps-usa');
    </script>
    
    


<div id='chartDiv'></div>

<script>
    document.ready=function(){
        zingchart.render({
        id:'chartDiv',
        data:oData
    });
    }
    
</script>

JavaScript

var oData={
    "graphset":[
        {
            "shapes":[
                {
                    "type":"zingchart.maps",
                    "options":{
                        "id":"map",
                        "name":"usa",
                        "items":["CA"],
                        "scale":true,
                        "x":0,
                        "y":"0px",
                        "width":"98%",
                        "height":"98%",
                        "style":{
                            "background-color":"#fff",
                            "border-width":"1px",
                            "border-color":"#abaaa7",
                            "shadow":0,
                            "hover-state":{
                                "visible":false
                            },
                            "label":{
                                "visible":false
                            },
                            "tooltip":{
                                "visible":false
                            }
                        }
                    }
                }
            ]
        }
    ]
};