<!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: 'bar3d',
'3dAspect': {
depth: 30,
true3d: 0,
yAngle: 10,
},
backgroundColor: '#fff',
title: {
text: 'Product Sales Comparison',
fontWeight: 'normal',
height: '40px',
},
legend: {
backgroundColor: 'none',
borderColor: 'none',
item: {
fontColor: '#333',
},
layout: 'float',
shadow: false,
width: '90%',
x: '37%',
y: '10%',
},
plotarea: {
alpha: 0.3,
backgroundColor: '#fff',
margin: '95px 35px 50px 70px',
},
scaleX: {
values: ['January', 'February', 'March', 'April', 'May', 'June'],
alpha: 0.5,
backgroundColor: '#fff',
borderColor: '#333',
borderWidth: '1px',
guide: {
visible: false,
},
item: {
fontColor: '#333',
fontSize: '11px',
},
tick: {
alpha: 0.2,
lineColor: '#333',
},
},
scaleY: {
alpha: 0.5,
backgroundColor: '#fff',
borderColor: '#333',
borderWidth: '1px',
format: '$%v',
guide: {
alpha: 0.2,
lineColor: '#333',
lineStyle: 'solid',
},
item: {
fontColor: '#333',
paddingRight: '6px',
},
tick: {
alpha: 0.2,
lineColor: '#333',
},
},
series: [{
text: 'Product 1',
values: [22650, 18750, 29050, 28745, 31500, 31625],
tooltip: {
text: '$%v',
backgroundColor: '#03A9F4',
borderColor: 'none',
borderRadius: '5px',
fontSize: '12px',
padding: '6px 12px',
shadow: false,
},
backgroundColor: '#03A9F4 #4FC3F7',
borderColor: '#03A9F4',
legendMarker: {
borderColor: '#03A9F4',
},
},
{
text: 'Product 2',
values: [24200, 12750, 24250, 11500, 22550, 24250],
tooltip: {
text: '$%v',
backgroundColor: '#673AB7',
borderColor: 'none',
borderRadius: '5px',
fontSize: '12px',
padding: '6px 12px',
shadow: false,
},
backgroundColor: '#673AB7 #9575CD',
borderColor: '#673AB7',
legendMarker: {
borderColor: '#673AB7',
},
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
defaults: {
fontFamily: 'sans-serif',
},
});
</script>
</body>
</html>
let chartConfig = {
type: 'bar3d',
'3dAspect': {
depth: 30,
true3d: 0,
yAngle: 10,
},
backgroundColor: '#fff',
title: {
text: 'Product Sales Comparison',
fontWeight: 'normal',
height: '40px',
},
legend: {
backgroundColor: 'none',
borderColor: 'none',
item: {
fontColor: '#333',
},
layout: 'float',
shadow: false,
width: '90%',
x: '37%',
y: '10%',
},
plotarea: {
alpha: 0.3,
backgroundColor: '#fff',
margin: '95px 35px 50px 70px',
},
scaleX: {
values: ['January', 'February', 'March', 'April', 'May', 'June'],
alpha: 0.5,
backgroundColor: '#fff',
borderColor: '#333',
borderWidth: '1px',
guide: {
visible: false,
},
item: {
fontColor: '#333',
fontSize: '11px',
},
tick: {
alpha: 0.2,
lineColor: '#333',
},
},
scaleY: {
alpha: 0.5,
backgroundColor: '#fff',
borderColor: '#333',
borderWidth: '1px',
format: '$%v',
guide: {
alpha: 0.2,
lineColor: '#333',
lineStyle: 'solid',
},
item: {
fontColor: '#333',
paddingRight: '6px',
},
tick: {
alpha: 0.2,
lineColor: '#333',
},
},
series: [
{
text: 'Product 1',
values: [22650, 18750, 29050, 28745, 31500, 31625],
tooltip: {
text: '$%v',
backgroundColor: '#03A9F4',
borderColor: 'none',
borderRadius: '5px',
fontSize: '12px',
padding: '6px 12px',
shadow: false,
},
backgroundColor: '#03A9F4 #4FC3F7',
borderColor: '#03A9F4',
legendMarker: {
borderColor: '#03A9F4',
},
},
{
text: 'Product 2',
values: [24200, 12750, 24250, 11500, 22550, 24250],
tooltip: {
text: '$%v',
backgroundColor: '#673AB7',
borderColor: 'none',
borderRadius: '5px',
fontSize: '12px',
padding: '6px 12px',
shadow: false,
},
backgroundColor: '#673AB7 #9575CD',
borderColor: '#673AB7',
legendMarker: {
borderColor: '#673AB7',
},
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
defaults: {
fontFamily: 'sans-serif',
},
});
