<!doctype html>
<html class="zc-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 {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // CHART CONFIG
// -----------------------------
let chartConfig = {
theme: 'classic',
graphset: [{
backgroundColor: 'white',
height: '10%',
title: {
text: 'Congo - 2020',
backgroundColor: 'white',
color: '#05669D',
fontFamily: 'Helvetica',
fontSize: '40px',
fontWeight: 'bold',
offsetX: '45px',
offsetY: '-6px',
textAlign: 'left'
},
subtitle: {
text: '<span style=\'font-weight:none;\'>Population:</span> <span style=\'font-size:40;font-weight:bold;\'>20,962,000</span>',
color: '#05669D',
fontFamily: 'Helvetica',
fontWeight: 'none',
offsetX: '-185px',
offsetY: '-6px',
textAlign: 'right'
},
labels: [{
text: 'Male',
color: 'white',
fontFamily: 'Helvetica',
fontSize: '52px',
fontWeight: 'bold',
x: '20%',
y: '130px'
},
{
text: 'Female',
color: 'white',
fontFamily: 'Helvetica',
fontSize: '52px',
fontWeight: 'bold',
x: '60%',
y: '130px'
}
]
},
{
type: 'pop-pyramid',
backgroundColor: 'white',
height: '90%',
y: '10%',
legend: {
visible: false
},
options: {
aspect: 'varea',
labelPlacement: 'side',
side2: {
plotarea: {
backgroundColor: '#D156BF'
},
source: {
text: 'Source: https://population.un.org/wpp/DataQuery/',
fontSize: '9px',
fontWeight: 'none',
x: '-10%',
y: '95%'
}
}
},
plot: {
stacked: true
},
plotarea: {
marginTop: '10px',
backgroundColor: '#05669D'
},
scaleX: {
values: ['', '0-4', '5-14', '15-24', '25-49', '50+', '60+', '65+', '70+', '75+', '80+', '85+', '90+', ''],
guide: {
alpha: 0.5,
lineColor: 'white',
lineStyle: 'solid',
lineWidth: '2px'
},
item: {
color: 'white',
fontSize: '9px',
offsetX: '38px',
offsetY: '-8px',
textAlign: 'middle'
},
itemsOverlap: true,
tick: {
visible: false
}
},
scaleY: {
values: '0:10:2.5',
format: '%v%',
guide: {
visible: false
},
item: {
color: 'white',
fontSize: '9px',
offsetY: '-20px',
rules: [{
rule: '%i == 4',
visible: false
},
{
rule: '%i == 0',
visible: false
}
]
},
lineColor: 'black',
lineWidth: '1px',
short: true,
tick: {
alpha: 0.5,
lineColor: 'white',
offsetY: '-10px'
}
},
tooltip: {
text: '%v%',
backgroundColor: 'white',
borderColor: '#05669D',
borderRadius: '3px',
borderWidth: '1px',
color: '#05669D',
shadow: false
},
series: [{
values: [null, 8.4, 16.5, 15.8, 34.1, 25.3, 14.7, 10.2, 6.6, 3.7, 1.8, 0.6, 0.1, null],
alphaArea: 0.8,
backgroundColor: 'white',
dataSide: 1,
lineColor: 'white',
lineWidth: '1px',
marker: {
visible: false
}
},
{
values: [null, 8.0, 15.8, 15.2, 33.3, 27.8, 17.1, 12.5, 8.5, 5.2, 2.8, 1.1, 0.3, null],
alphaArea: 0.8,
backgroundColor: 'white',
dataSide: 2,
lineColor: 'white',
lineWidth: '1px',
marker: {
visible: false
}
}
]
}
]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig
});
</script>
</body>
</html>
// CHART CONFIG
// -----------------------------
let chartConfig = {
theme: 'classic',
graphset: [
{
backgroundColor: 'white',
height: '10%',
title: {
text: 'Congo - 2020',
backgroundColor: 'white',
color: '#05669D',
fontFamily: 'Helvetica',
fontSize: '40px',
fontWeight: 'bold',
offsetX: '45px',
offsetY: '-6px',
textAlign: 'left'
},
subtitle: {
text: '<span style=\'font-weight:none;\'>Population:</span> <span style=\'font-size:40;font-weight:bold;\'>20,962,000</span>',
color: '#05669D',
fontFamily: 'Helvetica',
fontWeight: 'none',
offsetX: '-185px',
offsetY: '-6px',
textAlign: 'right'
},
labels: [{
text: 'Male',
color: 'white',
fontFamily: 'Helvetica',
fontSize: '52px',
fontWeight: 'bold',
x: '20%',
y: '130px'
},
{
text: 'Female',
color: 'white',
fontFamily: 'Helvetica',
fontSize: '52px',
fontWeight: 'bold',
x: '60%',
y: '130px'
}]
},
{
type: 'pop-pyramid',
backgroundColor: 'white',
height: '90%',
y: '10%',
legend: {
visible: false
},
options: {
aspect: 'varea',
labelPlacement: 'side',
side2: {
plotarea: {
backgroundColor: '#D156BF'
},
source: {
text: 'Source: https://population.un.org/wpp/DataQuery/',
fontSize: '9px',
fontWeight: 'none',
x: '-10%',
y: '95%'
}
}
},
plot: {
stacked: true
},
plotarea: {
marginTop: '10px',
backgroundColor: '#05669D'
},
scaleX: {
values: ['', '0-4', '5-14', '15-24', '25-49', '50+', '60+', '65+', '70+', '75+', '80+', '85+', '90+', ''],
guide: {
alpha: 0.5,
lineColor: 'white',
lineStyle: 'solid',
lineWidth: '2px'
},
item: {
color: 'white',
fontSize: '9px',
offsetX: '38px',
offsetY: '-8px',
textAlign: 'middle'
},
itemsOverlap: true,
tick: {
visible: false
}
},
scaleY: {
values: '0:10:2.5',
format: '%v%',
guide: {
visible: false
},
item: {
color: 'white',
fontSize: '9px',
offsetY: '-20px',
rules: [
{
rule: '%i == 4',
visible: false
},
{
rule: '%i == 0',
visible: false
}
]
},
lineColor: 'black',
lineWidth: '1px',
short: true,
tick: {
alpha: 0.5,
lineColor: 'white',
offsetY: '-10px'
}
},
tooltip: {
text: '%v%',
backgroundColor: 'white',
borderColor: '#05669D',
borderRadius: '3px',
borderWidth: '1px',
color: '#05669D',
shadow: false
},
series: [
{
values: [null, 8.4, 16.5, 15.8, 34.1, 25.3, 14.7, 10.2, 6.6, 3.7, 1.8, 0.6, 0.1, null],
alphaArea: 0.8,
backgroundColor: 'white',
dataSide: 1,
lineColor: 'white',
lineWidth: '1px',
marker: {
visible: false
}
},
{
values: [null, 8.0, 15.8, 15.2, 33.3, 27.8, 17.1, 12.5, 8.5, 5.2, 2.8, 1.1, 0.3, null],
alphaArea: 0.8,
backgroundColor: 'white',
dataSide: 2,
lineColor: 'white',
lineWidth: '1px',
marker: {
visible: false
}
}
]
}
]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig
});
