Legend for zero values bug

In this example below you will see how to do a Legend for zero values bug with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by bhagyeshjain, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright bhagyeshjain ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Legend for zero values bug</title>
  
  
  
  
  
</head>

<body>

  <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'></div>
	</body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/bhagyeshjain/legend-for-zero-values-bug-KmvBra */
var myConfig = {
"success":true,
"errorMessages":[],
"infoMessages":[],
"successMessages":[],
"dataMap":{
    
},
"object":null,
"failedData":null,
"gui":{
    "context-menu":{
        "empty":false
    }
},
"colorRange":null,
"graphset":[
    {
        "type":"bar",
        "stacked":true,
        "title":{
            "text":"Top Technology Category Based on Spend, 2017 (Value (Constant Annual), US Dollar, B)",
            "wrap-text":true,
            "font-color":"#004b85"
        },
        "source":{
            "text":"Source: IDC Worldwide BB TEST, 2016Q4",
            "visible":true
        },
        "legend":{
            "layout":"float",
            "position":"50% 100%",
            "overflow":"page",
            "item":{
                "max-chars":30
            },
            "visible":true,
            "minimize":false,
            "max-items":"8"
        },
        "series":[
            {
                "type":"bar",
                "values":[1085.41546173216,1128.0507228239242,1140.8680072082761,1207.7593655581773,1251.4301563765455,1271.9787445422191,1311.0200010254398,1319.3766236980273,1337.5040023397898,1360.3260506181364,1390.9377156015212,1410.7057945456847,1427.9784607617573,1441.9110460567993,1454.9004891598454,1454.9004891598458],
                "scales":"scale-x,scale-y",
                "text":"Telecom Services",
                "decimals":3,
                "palette":null,
                "thousands-separator":","
            },
            {
                "type":"bar",
                "values":[453.96451082778646,478.6492767528154,485.1987582886272,465.07684115910763,523.747449248338,576.3763435169637,625.0290024852575,661.956850129614,704.8260856204689,744.0367969368359,728.5319235754808,735.8900198626008,746.2578261170916,751.2694764275932,751.194542671671,751.1945426716709],
                "scales":"scale-x,scale-y",
                "text":"Devices",
                "decimals":3,
                "palette":null,
                "thousands-separator":","
            },
            {
                "type":"bar",
                "values":[480.85529408496495,515.2903375784424,542.9130669714328,529.9029361142517,543.064905717986,561.0916247208409,579.5041228606519,593.7303625437031,612.3849513460476,633.1686152392557,653.2803849201474,673.5948705308392,692.7109551798353,712.7446004538369,733.9469331750065,733.9469331750057],
                "scales":"scale-x,scale-y",
                "text":"IT Services",
                "decimals":3,
                "palette":null,
                "thousands-separator":","
            },
            {
                "type":"bar",
                "values":[228.93945915863813,254.6973808680464,270.6079036511201,271.2528633060751,294.01566859981835,315.50975370924573,337.07239024489303,362.60609346107304,385.18789577447086,415.76106553077693,443.3575896424582,473.01758483578163,505.34103845033155,540.2373864575707,577.4875017346677,577.4875017346671],
                "scales":"scale-x,scale-y",
                "text":"Software",
                "decimals":3,
                "palette":null,
                "thousands-separator":","
            },
            {
                "type":"bar",
                "values":[145.11752119551073,148.24694239510376,146.4626767026622,132.20852285481325,153.22060669026524,160.41238368181493,165.03698256002122,171.77705454323976,179.84139003075396,200.53076149623175,207.46180755983204,220.00566270447052,235.06669326855186,247.78805672026667,263.415651626427,263.41565162642735],
                "scales":"scale-x,scale-y",
                "text":"Infrastructure",
                "decimals":3,
                "palette":null,
                "thousands-separator":","
            },
            {
                "type":"bar",
                "values":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                "scales":"scale-x,scale-y",
                "text":"Others",
                "decimals":3,
                "palette":null,
                "thousands-separator":","
            }
        ],
        "plot":{
            "tooltip-text":"%t: %k, %v (Value (Constant Annual), US Dollar, B)"
        },
        "scale-x":{
            "visible":true,
            "values":["2006","2007","2008","2009","2010","2011","2012","2013","2014","2015","2016","2017","2018","2019","2020","2021"],
            "label":{
                "text":null
            },
            "item":{
                
            },
            "markers":[
                {
                    "type":"area",
                    "range":["2017","2018"],
                    "value-range":true,
                    "background-color":"#fffbdc",
                    "border-color":"#fff0b1",
                    "border-width":3
                }
            ]
        },
        "scale-y":{
            "visible":true,
            "format":"%v",
            "label":{
                "text":null
            },
            "item":{
                
            }
        }
    }
],
"growthRate":null,
"layout":"1x1",
"dimName":"attr_technology_category_6682"
};

zingchart.render({
  id: "myChart",
  data: myConfig,
  height: 400,
  width: "100%"
});

Comments