<!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>
.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: {
tooltip: {
text: '%v Million units<br>sold in %kl',
borderRadius: '5px',
shadow: 0,
textAlign: 'left',
},
alpha: 0.6,
animation: {
delay: 500,
speed: 2000,
sequence: 'ANIMATION_BY_NODE',
},
borderRadiusTopLeft: '5px',
borderRadiusTopRight: '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',
},
},
scrollX: {
bar: {
alpha: 0.5,
backgroundColor: '#a6a6a6',
borderRadius: '5px',
},
handle: {
backgroundColor: 'white',
borderBottom: '1px solid #a6a6a6',
borderLeft: '1px solid #a6a6a6',
borderRadius: '5px',
borderRight: '1px solid #a6a6a6',
borderTop: '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: {
tooltip: {
text: '%v Million units<br>sold in %kl',
borderRadius: '5px',
shadow: 0,
textAlign: 'left',
},
alpha: 0.6,
animation: {
delay: 500,
speed: 2000,
sequence: 'ANIMATION_BY_NODE',
},
borderRadiusTopLeft: '5px',
borderRadiusTopRight: '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',
},
},
scrollX: {
bar: {
alpha: 0.5,
backgroundColor: '#a6a6a6',
borderRadius: '5px',
},
handle: {
backgroundColor: 'white',
borderBottom: '1px solid #a6a6a6',
borderLeft: '1px solid #a6a6a6',
borderRadius: '5px',
borderRight: '1px solid #a6a6a6',
borderTop: '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%',
});
