<!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: 'hbar3d',
'3dAspect': {
depth: 15,
true3d: false,
yAngle: 10,
},
backgroundColor: '#43577c',
stacked: true,
title: {
text: 'Soil Sample Counts',
backgroundColor: '#ABAAAD',
fontColor: '#000000',
fontWeight: 'normal',
},
legend: {
backgroundColor: 'none',
borderWidth: '0px',
item: {
fontColor: '#acbad0',
},
layout: 'float',
margin: '12% auto auto auto',
marker: {
borderColor: '#fff',
},
toggleAction: 'remove',
shadow: false,
},
plot: {
tooltip: {
text: '%t / %k = %v<br>%k Total = %total',
borderColor: '#ffffff',
borderWidth: '1px',
fontColor: '#000000',
},
alpha: 0.9,
barWidth: '25px',
},
plotarea: {
backgroundColor: '#4f678e',
margin: '25% 5% 20% 15%',
},
scaleX: {
values: [
'Region 1',
'Region 2',
'Region 3',
'Region 4',
'Region 5',
'Region 6',
],
backgroundColor: '#4F678E',
guide: {
lineColor: '#fff',
},
item: {
fontColor: '#acbad0',
offsetX: '-5%',
},
tick: {
lineColor: '#6e82a1',
},
},
scaleY: {
backgroundColor: '#43577c #4F678E',
guide: {
lineColor: '#fff',
},
item: {
fontColor: '#acbad0',
},
label: {
text: 'Number of Samples Taken',
fontColor: '#acbad0',
fontWeight: 'normal',
offsetY: '5%',
},
tick: {
lineColor: '#6e82a1',
},
},
series: [{
text: 'Type 1A',
values: [17, 28, 9, 14, 27, 13],
backgroundColor: '#7D7B6E',
},
{
text: 'Type 2C',
values: [11, 26, 7, 44, 11, 28],
backgroundColor: '#A3A090',
},
{
text: 'Type 2F',
values: [13, 21, 16, 30, 23, 18],
backgroundColor: '#BDB9A6',
},
{
text: 'Type 3D',
values: [8, 31, 12, 24, 20, 40],
backgroundColor: '#D7D3BD',
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
type: 'hbar3d',
'3dAspect': {
depth: 15,
true3d: false,
yAngle: 10,
},
backgroundColor: '#43577c',
stacked: true,
title: {
text: 'Soil Sample Counts',
backgroundColor: '#ABAAAD',
fontColor: '#000000',
fontWeight: 'normal',
},
legend: {
backgroundColor: 'none',
borderWidth: '0px',
item: {
fontColor: '#acbad0',
},
layout: 'float',
margin: '12% auto auto auto',
marker: {
borderColor: '#fff',
},
toggleAction: 'remove',
shadow: false,
},
plot: {
tooltip: {
text: '%t / %k = %v<br>%k Total = %total',
borderColor: '#ffffff',
borderWidth: '1px',
fontColor: '#000000',
},
alpha: 0.9,
barWidth: '25px',
},
plotarea: {
backgroundColor: '#4f678e',
margin: '25% 5% 20% 15%',
},
scaleX: {
values: [
'Region 1',
'Region 2',
'Region 3',
'Region 4',
'Region 5',
'Region 6',
],
backgroundColor: '#4F678E',
guide: {
lineColor: '#fff',
},
item: {
fontColor: '#acbad0',
offsetX: '-5%',
},
tick: {
lineColor: '#6e82a1',
},
},
scaleY: {
backgroundColor: '#43577c #4F678E',
guide: {
lineColor: '#fff',
},
item: {
fontColor: '#acbad0',
},
label: {
text: 'Number of Samples Taken',
fontColor: '#acbad0',
fontWeight: 'normal',
offsetY: '5%',
},
tick: {
lineColor: '#6e82a1',
},
},
series: [
{
text: 'Type 1A',
values: [17, 28, 9, 14, 27, 13],
backgroundColor: '#7D7B6E',
},
{
text: 'Type 2C',
values: [11, 26, 7, 44, 11, 28],
backgroundColor: '#A3A090',
},
{
text: 'Type 2F',
values: [13, 21, 16, 30, 23, 18],
backgroundColor: '#BDB9A6',
},
{
text: 'Type 3D',
values: [8, 31, 12, 24, 20, 40],
backgroundColor: '#D7D3BD',
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
