Animated Nested Pie Chart

<!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>

<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</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>

</body>

</html>

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}

// 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,
});