<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
html,
body,
#myChart {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
"type": "mixed",
"title": {
"text": "Area/Stacked Bar Mixed Chart"
},
"scale-x": {
"labels": ["Jan", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "Dec"],
"offset": 0
},
"scale-y": {
"values": "0:90:30",
"guide": {
"visible": false
}
},
"series": [{
"type": "area",
"values": [
15, 10, 16, 12, 13, 19, 11, 21, 15, 29,
21, 19, 23, 24, 17, 23, 26, 31, 29, 34,
19, 54, 23, 44, 33, 34, 30, 47, 61, 31,
59, 45, 69, 54, 70, 65, 78, 61, 76, 78,
60, 67, 87, 71, 80, 54, 78, 89, 57, 91
],
"background-color": "gray",
"line-color": "none",
"marker": {
"type": "none"
}
},
{
"type": "bar",
"values": [
2.1, 1.9, 2.3, 2.4, 1.7, 2.3, 7, 3.1, 2.9, 3.4,
1.5, 1.0, 1.6, 1.2, 11, 1.9, 14, 2.1, 1.5, 2.9,
5.9, 4.5, 6.9, 5.4, 7.0, 6.5, 7.8, 6.1, 7.6, 9.1,
11, 13.1, 21.1, 33, 41, 23.5, 34, 30, 13.7, 51.2,
41.2, 23.5, 34.2, 33.1, 32, 21, 19.7, 34, 7, 30.1
],
"stacked": true,
"stack": 1,
"bar-width": "70%",
"background-color": "#003300"
},
{
"type": "bar",
"values": [
1.5, 1.0, 1.6, 1.2, 1.3, 1.9, 1.1, 2.1, 1.5, 2.9,
2.1, 1.9, 2.3, 2.4, 1.7, 2.3, 2.6, 3.1, 2.9, 3.4,
1.9, 5.4, 2.3, 4.4, 3.3, 3.4, 3.0, 4.7, 6.1, 3.1,
5.9, 4.5, 6.9, 5.4, 7.0, 6.5, 7.8, 6.1, 7.6, 7.8,
6.0, 6.7, 8.7, 7.1, 8.0, 5.4, 7.8, 8.9, 5.7, 9.1
],
"stacked": true,
"stack": 1,
"bar-width": "70%",
"background-color": "#009900"
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: "100%",
width: "100%"
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
html,
body,
#myChart {
height: 100%;
width: 100%;
}
var myConfig = {
"type": "mixed",
"title": {
"text": "Area/Stacked Bar Mixed Chart"
},
"scale-x": {
"labels": ["Jan", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "Dec"],
"offset": 0
},
"scale-y": {
"values": "0:90:30",
"guide": {
"visible": false
}
},
"series": [{
"type": "area",
"values": [
15, 10, 16, 12, 13, 19, 11, 21, 15, 29,
21, 19, 23, 24, 17, 23, 26, 31, 29, 34,
19, 54, 23, 44, 33, 34, 30, 47, 61, 31,
59, 45, 69, 54, 70, 65, 78, 61, 76, 78,
60, 67, 87, 71, 80, 54, 78, 89, 57, 91
],
"background-color": "gray",
"line-color": "none",
"marker": {
"type": "none"
}
},
{
"type": "bar",
"values": [
2.1, 1.9, 2.3, 2.4, 1.7, 2.3, 7, 3.1, 2.9, 3.4,
1.5, 1.0, 1.6, 1.2, 11, 1.9, 14, 2.1, 1.5, 2.9,
5.9, 4.5, 6.9, 5.4, 7.0, 6.5, 7.8, 6.1, 7.6, 9.1,
11, 13.1, 21.1, 33, 41, 23.5, 34, 30, 13.7, 51.2,
41.2, 23.5, 34.2, 33.1, 32, 21, 19.7, 34, 7, 30.1
],
"stacked": true,
"stack": 1,
"bar-width": "70%",
"background-color": "#003300"
},
{
"type": "bar",
"values": [
1.5, 1.0, 1.6, 1.2, 1.3, 1.9, 1.1, 2.1, 1.5, 2.9,
2.1, 1.9, 2.3, 2.4, 1.7, 2.3, 2.6, 3.1, 2.9, 3.4,
1.9, 5.4, 2.3, 4.4, 3.3, 3.4, 3.0, 4.7, 6.1, 3.1,
5.9, 4.5, 6.9, 5.4, 7.0, 6.5, 7.8, 6.1, 7.6, 7.8,
6.0, 6.7, 8.7, 7.1, 8.0, 5.4, 7.8, 8.9, 5.7, 9.1
],
"stacked": true,
"stack": 1,
"bar-width": "70%",
"background-color": "#009900"
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: "100%",
width: "100%"
});