Zing Chart Stacked Graph Zing Chart Stacked Graph json json

Zing Chart Stacked Graph


You can access node values by both plot and node index. For example, (%node-value)(0)(4) would give you the value of the 5th node on the first plot.

Since a stacked bar graph is technically 2 plots, you could use the following tokens in your second (Open) plot:

"text":"%node-value:(%node-value)(0)"

A live example is below - run the snippet to see the chart.

var myConfig = {"graphset":[    {        "legend":{            "margin-top":50,            "background-color":"#FFFFFF",            "border-color":"#CCCCCC",            "shadow":false,            "margin-right":10,            "alpha":1        },        "border-color":"#cccccc",        "series":[            {                "text":"Closed",                "shadow-color":"#cccccc",                "shadow-blur-y":1,                "line-color":"#008000",                "background-color":"#008000",                "type":"bar",                "values":[0,0,1,1,3,3,3,3,4,4],                "shadow-alpha":1,                "marker":{                    "background-color-2":"#008000",                    "background-color":"#008000"                },                "shadow":true,                "background-color-2":"#008000",                "shadow-distance":2,                "shadow-blur-x":2            },            {                "text":"Open",                "shadow-color":"#cccccc",                "shadow-blur-y":1,                "line-color":"Orange",                "background-color":"Orange",                "type":"bar",                "values":[3,6,8,8,83,94,96,102,297,303],                "shadow-alpha":1,                "marker":{                    "background-color-2":"Orange",                    "background-color":"Orange"                },                "shadow":true,                "background-color-2":"Orange",                "shadow-distance":2,                "shadow-blur-x":2,                "value-box":{                    "font-size":14,                    "font-color":"black",                    "bold":true,                    "font-family":"Consolas",                    "placement":"top",                    "type":"all",                    "text":"%node-value:(%node-value)(0)"                }            }        ],        "scale-y":{            "line-gap-size":0,            "tick":{                "line-gap-size":0,                "line-color":"#cccccc",                "line-width":1,                "size":10            },            "line-color":"#cccccc",            "bold":true,            "item":{                "font-size":12,                "bold":true,                "font-family":"Consolas",                "color":"#333333"            },            "label":{                "font-size":16,                "margin-left":10,                "text":"Count",                "color":"#333333"            },            "line-width":2,            "font-family":"Consolas",            "color":"#333333"        },        "plotarea":{            "margin-top":50,            "margin-left":70,            "margin-right":100,            "margin-bottom":80        },        "scale-x":{            "line-gap-size":0,            "tick":{                "line-gap-size":0,                "line-color":"#999999",                "line-width":1,                "size":20            },            "font-size":8,            "line-color":"#cccccc",            "bold":true,            "guide":{                "line-width":1            },            "item":{                "font-size":12,                "bold":true,                "font-family":"Consolas",                "color":"#333333"            },            "label":{                "padding-top":100,                "font-size":16,                "text":"Month",                "color":"#333333"            },            "line-width":1,            "font-family":"Consolas",            "color":"#333333",            "values":["Feb 2015","Mar 2015","Apr 2015","May 2015","Jun 2015","Jul 2015","Aug 2015","Sep 2015","Oct 2015","Nov 2015"]        },        "background-color":"WhiteSmoke",        "border-width":1,        "stacked":true,        "lens":{            "visible":true,            "height":60,            "width":60        },        "plot":{                    },        "type":"bar",        "title":{            "background-color":"white",            "border-color":"#cccccc",            "border-width":1,            "font-size":18,            "bold":true,            "text":"L2PRO-TRAVs (Updated: 17 Nov 2015, 13:08)",            "font-family":"Consolas",            "color":"#333333"        }    }]}; zingchart.render({ 	id : 'myChart', 	data : myConfig, 	height: 400, 	width: 600 });
<script src="https://cdn.zingchart.com/zingchart.min.js"></script><div id="myChart"></div>