<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" 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,
backgroundColor: 'none',
fontColor: '#5b5b5b',
fontFamily: 'arial',
fontSize: '18px',
padding: '25px',
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,
backgroundColor: 'none',
fontColor: '#5b5b5b',
fontFamily: 'arial',
fontSize: '18px',
padding: '25px',
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,
});
