<!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 = {
type: 'nestedpie',
title: {
text: 'Animated Nested Pie Chart',
},
legend: {
borderColor: 'gray',
borderRadius: '5px',
borderWidth: '1px',
dragHandler: 'icon',
header: {
text: 'Ages',
fontColor: 'purple',
fontFamily: 'Georgia',
fontSize: '12px',
fontWeight: 'normal',
},
icon: {
lineColor: 'orange',
},
item: {
fontColor: 'black',
fontFamily: 'Georgia',
},
lineStyle: 'dashdot',
marker: {
type: 'circle',
},
minimize: true,
toggleAction: 'remove',
},
plot: {
tooltip: {
text: '%data-year Ages %t: %v',
padding: '10%',
alpha: 0.7,
backgroundColor: 'white',
borderColor: 'gray',
borderRadius: '3px',
borderWidth: '1px',
fontColor: 'black',
fontFamily: 'Georgia',
fontSize: '12px',
lineStyle: 'dashdot',
textAlpha: 1,
},
valueBox: {
text: '%data-year',
fontColor: 'white',
fontFamily: 'Georgia',
fontSize: '12px',
fontWeight: 'normal',
rules: [{
rule: '%p != 0',
visible: false,
}, ],
},
alpha: 0.8,
animation: {
effect: 'ANIMATION_EXPAND_LEFT',
onLegendToggle: false,
method: 'ANIMATION_BACK_EASE_OUT',
sequence: 'ANIMATION_BY_PLOT',
speed: 700,
},
borderColor: 'white',
borderWidth: '1px',
dataYear: ['2019', '2020', '2021'],
shadow: false,
sliceStart: '30%',
},
series: [{
text: '0-18',
values: [59, 55, 30],
backgroundColor: 'orange red',
tooltipText: 'Ages %t: %v',
},
{
text: '19-30',
values: [60, 50, 35],
backgroundColor: 'yellow orange',
},
{
text: '31-34',
values: [50, 40, 30],
backgroundColor: 'green blue',
},
{
text: '46-64',
values: [61, 59, 35],
backgroundColor: 'blue purple',
},
{
text: '65 and over',
values: [65, 55, 45],
backgroundColor: 'purple red',
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
});
</script>
</body>
</html>
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'nestedpie',
title: {
text: 'Animated Nested Pie Chart',
},
legend: {
borderColor: 'gray',
borderRadius: '5px',
borderWidth: '1px',
dragHandler: 'icon',
header: {
text: 'Ages',
fontColor: 'purple',
fontFamily: 'Georgia',
fontSize: '12px',
fontWeight: 'normal',
},
icon: {
lineColor: 'orange',
},
item: {
fontColor: 'black',
fontFamily: 'Georgia',
},
lineStyle: 'dashdot',
marker: {
type: 'circle',
},
minimize: true,
toggleAction: 'remove',
},
plot: {
tooltip: {
text: '%data-year Ages %t: %v',
padding: '10%',
alpha: 0.7,
backgroundColor: 'white',
borderColor: 'gray',
borderRadius: '3px',
borderWidth: '1px',
fontColor: 'black',
fontFamily: 'Georgia',
fontSize: '12px',
lineStyle: 'dashdot',
textAlpha: 1,
},
valueBox: {
text: '%data-year',
fontColor: 'white',
fontFamily: 'Georgia',
fontSize: '12px',
fontWeight: 'normal',
rules: [
{
rule: '%p != 0',
visible: false,
},
],
},
alpha: 0.8,
animation: {
effect: 'ANIMATION_EXPAND_LEFT',
onLegendToggle: false,
method: 'ANIMATION_BACK_EASE_OUT',
sequence: 'ANIMATION_BY_PLOT',
speed: 700,
},
borderColor: 'white',
borderWidth: '1px',
dataYear: ['2019', '2020', '2021'],
shadow: false,
sliceStart: '30%',
},
series: [
{
text: '0-18',
values: [59, 55, 30],
backgroundColor: 'orange red',
tooltipText: 'Ages %t: %v',
},
{
text: '19-30',
values: [60, 50, 35],
backgroundColor: 'yellow orange',
},
{
text: '31-34',
values: [50, 40, 30],
backgroundColor: 'green blue',
},
{
text: '46-64',
values: [61, 59, 35],
backgroundColor: 'blue purple',
},
{
text: '65 and over',
values: [65, 55, 45],
backgroundColor: 'purple red',
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
});
