Animated Dashboard ZingChart

by Manuel Gertrudix

HTML

<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
		<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
		ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script></head>
	<body>
		<div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
	</body>
</html>

CSS

.zc-ref {
  display: none;
}

JavaScript

zingchart.THEME="classic";
var myConfig = {
    "background-color":"#ecf2f6",
    "graphset":[
        {
            "type":"bar",
            "background-color":"#fff",
            "border-color":"#dae5ec",
            "border-width":"1px",
            "height":"30%",
            "width":"96%",
            "x":"2%",
            "y":"3%",
            "title":{
                "margin-top":"7px",
                "margin-left":"9px",
                "font-family":"Arial",
                "text":"DEPARTMENT PERFORMANCE",
                "background-color":"none",
                "shadow":0,
                "text-align":"left",
                "font-size":"11px",
                "font-weight":"bold",
                "font-color":"#707d94"
            },
            "scale-y":{
                "values":"0:300:100",
                "max-ticks":4,
                "max-items":4,
                "line-color":"none",
                "tick":{
                    "visible":false
                },
                "item":{
                    "font-color":"#8391a5",
                    "font-family":"Arial",
                    "font-size":"10px",
                    "padding-right":"5px"
                },
                "guide":{
                    "rules":[
                        {
                          "rule":"%i == 0",
                          "line-width":0
                        },
                        {
                          "rule":"%i > 0",
                          "line-style":"solid",
                          "line-width":"1px",
                          "line-color":"#d2dae2",
                          "alpha":0.4 
                        }
                    
                    ]
                }
            },
            "scale-x":{
                "items-overlap":true,
                "max-items":9999,
                "values":["Apparel","Drug","Footwear","Gift Card","Home","Jewelry","Garden","Other"],
                "offset-y":"1px",
   ...