• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
    
            .chart--container {
                min-height: 150px;
                width: 100%;
                height: 100%;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 480px;
            }
        </style>
    </head>
    
    <body>
        <div id="myChart" class="chart--container">
            <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
        </div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            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'
                    }
                ]
            };
    
            zingchart.render({
                id: 'myChart',
                data: chartConfig
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    	</head>
    	<body>
    		<div id="myChart" class="chart--container">
    			<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    		</div>
    	</body>
    </html>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    
    .chart--container {
      min-height: 150px;
      width: 100%;
      height: 100%;
    }
    
    .zc-ref {
      display: none;
    }
    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'
        }
      ]
    };
    
    zingchart.render({
      id: 'myChart',
      data: chartConfig
    });