• Edit
  • Download
  • <!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>
      <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: ['2017', '2018', '2019'],
            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: ['2017', '2018', '2019'],
        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
    });