<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'hbar',
title: {
text: 'Top & Bottom 5 products this month',
adjustLayout: true,
padding: '25px',
backgroundColor: 'none',
fontColor: '#5b5b5b',
fontFamily: 'arial',
fontSize: '18px',
textAlign: 'center'
},
plot: {
valueBox: {
fontColor: '#000'
},
animation: {
delay: 550,
effect: 'ANIMATION_EXPAND_VERTICAL',
method: 'ANIMATION_BOUNCE_EASE_OUT',
speed: 800
},
stacked: true
},
plotarea: {
adjustLayout: true,
margin: 'dynamic'
},
scaleX: {
alpha: 1,
label: {
text: 'Bottom 5 products by sales',
fontSize: '14px'
},
offsetEnd: '55%',
offsetX: '50%',
tick: {
alpha: 0
}
},
scaleX2: {
alpha: 0,
label: {
text: 'Top 5 products by sales',
fontSize: '14px'
},
offsetStart: '55%',
tick: {
alpha: 0
}
},
scaleY: {},
scaleY2: {},
series: [{
values: [-5, -4, -6, -7, -1],
valueBox: {
text: '%data-custom-token',
placement: 'bottom'
},
backgroundColor: '#fd625e',
dataCustomToken: [
'Videocon 1.5 Ton Star Split',
'Samsung Galaxy s6 Edge',
'Voltas 155CY 1.2 Ton 5 Star Air SPlit Conditioner',
'Google Nexus',
'Gitanjali 100 Gm 24Kt 995 Bis Hallmarked Purity Plain Gold Bar'
],
decimals: 2,
scales: 'scale-x,scale-y',
stack: 1
},
{
values: [0, 0, 0, 0, 0],
valueBox: {
text: '%data-custom-token',
placement: 'bottom'
},
backgroundColor: '#fd625e',
dataCustomToken: [-5, -4, -6, -7, -1],
decimals: 2,
scales: 'scale-x,scale-y',
stack: 1
},
{
values: [0, 0, 0, 0, 0],
valueBox: {
text: '%data-custom-token',
placement: 'bottom-in'
},
backgroundColor: '#68d7c6',
dataCustomToken: [5, 4, 6, 7, 1],
decimals: 2,
scales: 'scale-x-2,scale-y',
stack: 2
},
{
values: [5, 4, 6, 7, 1],
valueBox: {
text: '%data-custom-token',
placement: 'bottom-out'
},
backgroundColor: '#68d7c6',
dataCustomToken: [
'Insect And Mosquito Killer with NIght Lamp',
'Lenovo K3 Note 16GB',
'LED Projection Clock',
'Nokia 225 (black)',
'Nokia 225'
],
decimals: 2,
scales: 'scale-x-2,scale-y',
stack: 2
}
]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig
});
</script>
</body>
</html>
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'hbar',
title: {
text: 'Top & Bottom 5 products this month',
adjustLayout: true,
padding: '25px',
backgroundColor: 'none',
fontColor: '#5b5b5b',
fontFamily: 'arial',
fontSize: '18px',
textAlign: 'center'
},
plot: {
valueBox: {
fontColor: '#000'
},
animation: {
delay: 550,
effect: 'ANIMATION_EXPAND_VERTICAL',
method: 'ANIMATION_BOUNCE_EASE_OUT',
speed: 800
},
stacked: true
},
plotarea: {
adjustLayout: true,
margin: 'dynamic'
},
scaleX: {
alpha: 1,
label: {
text: 'Bottom 5 products by sales',
fontSize: '14px'
},
offsetEnd: '55%',
offsetX: '50%',
tick: {
alpha: 0
}
},
scaleX2: {
alpha: 0,
label: {
text: 'Top 5 products by sales',
fontSize: '14px'
},
offsetStart: '55%',
tick: {
alpha: 0
}
},
scaleY: {},
scaleY2: {},
series: [
{
values: [-5, -4, -6, -7, -1],
valueBox: {
text: '%data-custom-token',
placement: 'bottom'
},
backgroundColor: '#fd625e',
dataCustomToken: [
'Videocon 1.5 Ton Star Split',
'Samsung Galaxy s6 Edge',
'Voltas 155CY 1.2 Ton 5 Star Air SPlit Conditioner',
'Google Nexus',
'Gitanjali 100 Gm 24Kt 995 Bis Hallmarked Purity Plain Gold Bar'
],
decimals: 2,
scales: 'scale-x,scale-y',
stack: 1
},
{
values: [0, 0, 0, 0, 0],
valueBox: {
text: '%data-custom-token',
placement: 'bottom'
},
backgroundColor: '#fd625e',
dataCustomToken: [-5, -4, -6, -7, -1],
decimals: 2,
scales: 'scale-x,scale-y',
stack: 1
},
{
values: [0, 0, 0, 0, 0],
valueBox: {
text: '%data-custom-token',
placement: 'bottom-in'
},
backgroundColor: '#68d7c6',
dataCustomToken: [5, 4, 6, 7, 1],
decimals: 2,
scales: 'scale-x-2,scale-y',
stack: 2
},
{
values: [5, 4, 6, 7, 1],
valueBox: {
text: '%data-custom-token',
placement: 'bottom-out'
},
backgroundColor: '#68d7c6',
dataCustomToken: [
'Insect And Mosquito Killer with NIght Lamp',
'Lenovo K3 Note 16GB',
'LED Projection Clock',
'Nokia 225 (black)',
'Nokia 225'
],
decimals: 2,
scales: 'scale-x-2,scale-y',
stack: 2
}
]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig
});
