<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.chart--container {
min-height: 530px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
type: 'bar',
theme: 'classic',
backgroundColor: '#ffffff',
title: {
text: 'Sticky Notes Sold (by Color)',
backgroundColor: '#ffffff',
color: '#a6a6a6'
},
plot: {
alpha: 0.6,
animation: {
delay: 500,
speed: 2000,
sequence: 'ANIMATION_BY_NODE'
},
borderRadiusTopRight: '5px',
borderRadiusTopLeft: '5px',
scrollStepMultiplier: 1
},
scaleX: {
guide: {
lineColor: '#a6a6a6',
lineStyle: 'solid'
},
item: {
color: '#a6a6a6'
},
labels: ['Jan 19', 'Feb 19', 'Mar 19', 'Apr 19', 'May 19', 'Jun 19', 'Jul 19', 'Aug 19', 'Sep 19', 'Oct 19', 'Nov 19', 'Dec 19'],
lineColor: '#a6a6a6',
lineWidth: '0px',
tick: {
lineColor: '#a6a6a6',
lineWidth: '1px',
visible: false
},
zooming: true,
zoomTo: [
0,
3
]
},
scaleY: {
guide: {
lineColor: '#a6a6a6',
lineStyle: 'solid'
},
item: {
color: '#a6a6a6'
},
label: {
text: 'Millions of Units',
color: '#a6a6a6'
},
lineColor: '#a6a6a6',
lineWidth: '1px',
tick: {
lineColor: '#a6a6a6',
lineWidth: '1px'
}
},
tooltip: {
text: '%v Million units<br>sold in %kl',
borderRadius: '5px',
shadow: 0,
textAlign: 'left'
},
scrollX: {
bar: {
alpha: 0.5,
backgroundColor: '#a6a6a6',
borderRadius: '5px'
},
handle: {
backgroundColor: 'white',
borderRadius: '5px',
borderTop: '1px solid #a6a6a6',
borderRight: '1px solid #a6a6a6',
borderBottom: '1px solid #a6a6a6',
borderLeft: '1px solid #a6a6a6'
}
},
series: [{
values: [42, 43, 30, 40, 32, 37, 30, 29, 35, 41, 39, 40],
backgroundColor: '#f7846a'
},
{
values: [51, 53, 47, 42, 45, 39, 36, 35, 38, 43, 41, 50],
backgroundColor: '#ffc94e'
},
{
values: [69, 68, 54, 55, 53, 47, 42, 45, 32, 37, 30, 34],
backgroundColor: '#f1f14e'
},
{
values: [25, 15, 26, 30, 25, 20, 32, 34, 29, 25, 32, 26],
backgroundColor: '#c9ea5d'
},
{
values: [52, 46, 35, 26, 41, 31, 43, 47, 38, 40, 33, 29],
backgroundColor: '#92e4c9'
},
{
values: [37, 48, 31, 34, 30, 32, 41, 37, 51, 50, 32, 52],
backgroundColor: '#85d6e4'
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
type: 'bar',
theme: 'classic',
backgroundColor: '#ffffff',
title: {
text: 'Sticky Notes Sold (by Color)',
backgroundColor: '#ffffff',
color: '#a6a6a6'
},
plot: {
alpha: 0.6,
animation: {
delay: 500,
speed: 2000,
sequence: 'ANIMATION_BY_NODE'
},
borderRadiusTopRight: '5px',
borderRadiusTopLeft: '5px',
scrollStepMultiplier: 1
},
scaleX: {
guide: {
lineColor: '#a6a6a6',
lineStyle: 'solid'
},
item: {
color: '#a6a6a6'
},
labels: ['Jan 19', 'Feb 19', 'Mar 19', 'Apr 19', 'May 19', 'Jun 19', 'Jul 19', 'Aug 19', 'Sep 19', 'Oct 19', 'Nov 19', 'Dec 19'],
lineColor: '#a6a6a6',
lineWidth: '0px',
tick: {
lineColor: '#a6a6a6',
lineWidth: '1px',
visible: false
},
zooming: true,
zoomTo: [
0,
3
]
},
scaleY: {
guide: {
lineColor: '#a6a6a6',
lineStyle: 'solid'
},
item: {
color: '#a6a6a6'
},
label: {
text: 'Millions of Units',
color: '#a6a6a6'
},
lineColor: '#a6a6a6',
lineWidth: '1px',
tick: {
lineColor: '#a6a6a6',
lineWidth: '1px'
}
},
tooltip: {
text: '%v Million units<br>sold in %kl',
borderRadius: '5px',
shadow: 0,
textAlign: 'left'
},
scrollX: {
bar: {
alpha: 0.5,
backgroundColor: '#a6a6a6',
borderRadius: '5px'
},
handle: {
backgroundColor: 'white',
borderRadius: '5px',
borderTop: '1px solid #a6a6a6',
borderRight: '1px solid #a6a6a6',
borderBottom: '1px solid #a6a6a6',
borderLeft: '1px solid #a6a6a6'
}
},
series: [
{
values: [42, 43, 30, 40, 32, 37, 30, 29, 35, 41, 39, 40],
backgroundColor: '#f7846a'
},
{
values: [51, 53, 47, 42, 45, 39, 36, 35, 38, 43, 41, 50],
backgroundColor: '#ffc94e'
},
{
values: [69, 68, 54, 55, 53, 47, 42, 45, 32, 37, 30, 34],
backgroundColor: '#f1f14e'
},
{
values: [25, 15, 26, 30, 25, 20, 32, 34, 29, 25, 32, 26],
backgroundColor: '#c9ea5d'
},
{
values: [52, 46, 35, 26, 41, 31, 43, 47, 38, 40, 33, 29],
backgroundColor: '#92e4c9'
},
{
values: [37, 48, 31, 34, 30, 32, 41, 37, 51, 50, 32, 52],
backgroundColor: '#85d6e4'
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});