<!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',
backgroundColor: '#FFF8E2',
title: {
text: 'Debt Growth By Country',
},
plot: {
tooltip: {
text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
backgroundColor: 'white',
bold: true,
borderColor: '#e3e3e3',
borderRadius: '5px',
fontColor: '#2f2f2f',
fontSize: '12px',
padding: '15px',
shadow: true,
shadowAlpha: 0.2,
shadowBlur: 5,
shadowColor: '#a1a1a1',
shadowDistance: 4,
textAlign: 'left',
visible: true,
},
borderRadius: '0 0 5 5',
},
scaleX: {
values: [
'1950s',
'1960s',
'1970s',
'1980s',
'1990s',
'2000s',
'2010s',
'2020s<br>(Projected)',
],
},
scaleY: {
format: '%v%',
guide: {
visible: false,
},
maxItems: 5,
tick: {
visible: false,
},
},
series: [{
text: 'United States',
values: [-0.4, -0.8, -2.0, -3.8, -2.1, -1.5, -7.6, -3.0],
backgroundColor: '#43B195',
},
{
text: 'Japan',
values: [-0.2, -0.7, -2.0, -3.8, -5.1, -6.5, -7.6, -11.3],
backgroundColor: '#EA4352',
},
{
text: 'Greece',
values: [-0.4, -0.6, -2.0, -3.8, -5.1, -6.5, -7.6, -9.5],
backgroundColor: '#FAE935',
},
{
text: 'Jamaica',
values: [-0.3, -0.8, -2.0, -2.8, -2.7, -4.3, -6.3, -8.9],
backgroundColor: '#BBDC98',
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
type: 'bar',
backgroundColor: '#FFF8E2',
title: {
text: 'Debt Growth By Country',
},
plot: {
tooltip: {
text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
backgroundColor: 'white',
bold: true,
borderColor: '#e3e3e3',
borderRadius: '5px',
fontColor: '#2f2f2f',
fontSize: '12px',
padding: '15px',
shadow: true,
shadowAlpha: 0.2,
shadowBlur: 5,
shadowColor: '#a1a1a1',
shadowDistance: 4,
textAlign: 'left',
visible: true,
},
borderRadius: '0 0 5 5',
},
scaleX: {
values: [
'1950s',
'1960s',
'1970s',
'1980s',
'1990s',
'2000s',
'2010s',
'2020s<br>(Projected)',
],
},
scaleY: {
format: '%v%',
guide: {
visible: false,
},
maxItems: 5,
tick: {
visible: false,
},
},
series: [
{
text: 'United States',
values: [-0.4, -0.8, -2.0, -3.8, -2.1, -1.5, -7.6, -3.0],
backgroundColor: '#43B195',
},
{
text: 'Japan',
values: [-0.2, -0.7, -2.0, -3.8, -5.1, -6.5, -7.6, -11.3],
backgroundColor: '#EA4352',
},
{
text: 'Greece',
values: [-0.4, -0.6, -2.0, -3.8, -5.1, -6.5, -7.6, -9.5],
backgroundColor: '#FAE935',
},
{
text: 'Jamaica',
values: [-0.3, -0.8, -2.0, -2.8, -2.7, -4.3, -6.3, -8.9],
backgroundColor: '#BBDC98',
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
