<!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',
backgroundColor: '#fff',
legend: {
marginTop: '27%',
marginRight: '15%',
backgroundColor: 'none',
borderColor: 'none',
item: {
padding: '10px',
color: '#333',
},
marker: {
type: 'circle',
borderColor: 'none',
},
},
plot: {
valueBox: {
visible: false,
},
bandSpace: 0,
borderWidth: '1px',
hoverState: {
visible: false,
},
offset: '10px',
rules: [{
borderColor: '#7A73C6',
rule: '%p == 0',
},
{
borderColor: '#5DC5A1',
rule: '%p == 1',
},
{
borderColor: '#E18C78',
rule: '%p == 2',
},
{
borderColor: '#d3d3d3',
rule: '%p == 3',
},
{
borderColor: '#C77196',
rule: '%p == 4',
},
{
backgroundColor: '#5850AC',
borderColor: '#5850AC',
rule: '(%p == 0 && %i == 4)',
},
{
backgroundColor: '#3BAA83',
borderColor: '#3BAA83',
rule: '(%p == 1 && %i == 4)',
},
{
backgroundColor: '#B75A44',
borderColor: '#B75A44',
rule: '(%p == 2 && %i == 4)',
},
{
backgroundColor: '#aaa9a9',
borderColor: '#aaa9a9',
rule: '(%p == 3 && %i == 4)',
},
{
backgroundColor: '#A4436D',
borderColor: '#A4436D',
rule: '(%p == 4 && %i == 4)',
},
],
shadow: false,
},
plotarea: {
marginRight: '20%',
},
series: [{
values: [null, null, null, null, 35, 35, 35, 35, 35, 35, 35, 35],
backgroundColor: '#7A73C6',
},
{
values: [null, null, null, null, 42, 42, 42, 42, 42, 42, 42, 42],
backgroundColor: '#5DC5A1',
},
{
values: [null, null, null, null, 67, 67, 67, 67, 67, 67, 67, 67],
backgroundColor: '#E18C78',
},
{
values: [null, null, null, null, 89, 89, 89, 89, 89, 89, 89, 89],
backgroundColor: '#d3d3d3',
},
{
values: [null, null, null, null, 5, 5, 5, 5, 5, 5, 5, 5],
backgroundColor: '#C77196',
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
});
</script>
</body>
</html>
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'nestedpie',
backgroundColor: '#fff',
legend: {
marginTop: '27%',
marginRight: '15%',
backgroundColor: 'none',
borderColor: 'none',
item: {
padding: '10px',
color: '#333',
},
marker: {
type: 'circle',
borderColor: 'none',
},
},
plot: {
valueBox: {
visible: false,
},
bandSpace: 0,
borderWidth: '1px',
hoverState: {
visible: false,
},
offset: '10px',
rules: [
{
borderColor: '#7A73C6',
rule: '%p == 0',
},
{
borderColor: '#5DC5A1',
rule: '%p == 1',
},
{
borderColor: '#E18C78',
rule: '%p == 2',
},
{
borderColor: '#d3d3d3',
rule: '%p == 3',
},
{
borderColor: '#C77196',
rule: '%p == 4',
},
{
backgroundColor: '#5850AC',
borderColor: '#5850AC',
rule: '(%p == 0 && %i == 4)',
},
{
backgroundColor: '#3BAA83',
borderColor: '#3BAA83',
rule: '(%p == 1 && %i == 4)',
},
{
backgroundColor: '#B75A44',
borderColor: '#B75A44',
rule: '(%p == 2 && %i == 4)',
},
{
backgroundColor: '#aaa9a9',
borderColor: '#aaa9a9',
rule: '(%p == 3 && %i == 4)',
},
{
backgroundColor: '#A4436D',
borderColor: '#A4436D',
rule: '(%p == 4 && %i == 4)',
},
],
shadow: false,
},
plotarea: {
marginRight: '20%',
},
series: [
{
values: [null, null, null, null, 35, 35, 35, 35, 35, 35, 35, 35],
backgroundColor: '#7A73C6',
},
{
values: [null, null, null, null, 42, 42, 42, 42, 42, 42, 42, 42],
backgroundColor: '#5DC5A1',
},
{
values: [null, null, null, null, 67, 67, 67, 67, 67, 67, 67, 67],
backgroundColor: '#E18C78',
},
{
values: [null, null, null, null, 89, 89, 89, 89, 89, 89, 89, 89],
backgroundColor: '#d3d3d3',
},
{
values: [null, null, null, null, 5, 5, 5, 5, 5, 5, 5, 5],
backgroundColor: '#C77196',
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
});
