• 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>
            zing-grid[loading] {
                height: 800px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                type: 'pie',
                title: {
                    text: 'Scrolling Legend',
                    fontFamily: 'Georgia'
                },
                legend: {
                    maxItems: 8,
                    overflow: 'scroll',
                    scroll: {
                        bar: {
                            backgroundColor: '#e6e6ff #b3b3ff',
                            borderLeft: '1px solid #9999ff'
                        },
                        handle: {
                            backgroundColor: '#cc99ff',
                            borderLeft: '1px solid #9933ff',
                            borderRight: '1px solid #9933ff',
                            borderTop: '1px solid #9933ff',
                            borderBottom: '1px solid #9933ff',
                            borderRadius: '2px'
                        }
                    },
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 1,
                    borderColor: '#9999ff',
                    borderRadius: '3px',
                    marker: {
                        type: 'circle'
                    }
                },
                plot: {
                    tooltip: {
                        text: '%t: %v',
                        borderRadius: '2px'
                    },
                    valueBox: {
                        visible: false
                    },
                    borderWidth: 1,
                    borderColor: '#cccccc',
                    lineStyle: 'dotted'
                },
                series: [{
                        values: [234],
                        backgroundColor: '#cc0000',
                        text: 'Alpha'
                    },
                    {
                        values: [121],
                        backgroundColor: '#ff3300',
                        text: 'Beta'
                    },
                    {
                        values: [77],
                        backgroundColor: '#ff6600',
                        text: 'Gamma'
                    },
                    {
                        values: [65],
                        backgroundColor: '#ff9933',
                        text: 'Delta'
                    },
                    {
                        values: [59],
                        backgroundColor: '#ffcc00',
                        text: 'Epsilon'
                    },
                    {
                        values: [35],
                        backgroundColor: '#ace600',
                        text: 'Zeta'
                    },
                    {
                        values: [34],
                        backgroundColor: '#88cc00',
                        text: 'Eta'
                    },
                    {
                        values: [31],
                        backgroundColor: '#339933',
                        text: 'Theta'
                    },
                    {
                        values: [16],
                        backgroundColor: '#66ccff',
                        text: 'Iota'
                    },
                    {
                        values: [14],
                        backgroundColor: '#3399ff',
                        text: 'Kappa'
                    },
                    {
                        values: [13],
                        backgroundColor: '#0066ff',
                        text: 'Lambda'
                    },
                    {
                        values: [12],
                        backgroundColor: '#3333cc',
                        text: 'Mu'
                    },
                    {
                        values: [11],
                        backgroundColor: '#6600ff',
                        text: 'Nu'
                    },
                    {
                        values: [10],
                        backgroundColor: '#9933ff',
                        text: 'Xi'
                    },
                    {
                        values: [9],
                        backgroundColor: '#9999ff',
                        text: 'Omicron'
                    }
                ]
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: 400,
                width: '100%'
            });
        </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'></div>
    	</body>
    </html>
    
          
    var myConfig = {
      type: 'pie',
      title: {
        text: 'Scrolling Legend',
        fontFamily: 'Georgia'
      },
      legend: {
        maxItems: 8,
        overflow: 'scroll',
        scroll: {
          bar: {
            backgroundColor: '#e6e6ff #b3b3ff',
            borderLeft: '1px solid #9999ff'
          },
          handle: {
            backgroundColor: '#cc99ff',
            borderLeft: '1px solid #9933ff',
            borderRight: '1px solid #9933ff',
            borderTop: '1px solid #9933ff',
            borderBottom: '1px solid #9933ff',
            borderRadius: '2px'
          }
        },
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 1,
        borderColor: '#9999ff',
        borderRadius: '3px',
        marker: {
          type: 'circle'
        }
      },
      plot: {
        tooltip: {
          text: '%t: %v',
          borderRadius: '2px'
        },
        valueBox: {
          visible: false
        },
        borderWidth: 1,
        borderColor: '#cccccc',
        lineStyle: 'dotted'
      },
      series: [
        {
          values: [234],
          backgroundColor: '#cc0000',
          text: 'Alpha'
        },
        {
          values: [121],
          backgroundColor: '#ff3300',
          text: 'Beta'
        },
        {
          values: [77],
          backgroundColor: '#ff6600',
          text: 'Gamma'
        },
        {
          values: [65],
          backgroundColor: '#ff9933',
          text: 'Delta'
        },
        {
          values: [59],
          backgroundColor: '#ffcc00',
          text: 'Epsilon'
        },
        {
          values: [35],
          backgroundColor: '#ace600',
          text: 'Zeta'
        },
        {
          values: [34],
          backgroundColor: '#88cc00',
          text: 'Eta'
        },
        {
          values: [31],
          backgroundColor: '#339933',
          text: 'Theta'
        },
        {
          values: [16],
          backgroundColor: '#66ccff',
          text: 'Iota'
        },
        {
          values: [14],
          backgroundColor: '#3399ff',
          text: 'Kappa'
        },
        {
          values: [13],
          backgroundColor: '#0066ff',
          text: 'Lambda'
        },
        {
          values: [12],
          backgroundColor: '#3333cc',
          text: 'Mu'
        },
        {
          values: [11],
          backgroundColor: '#6600ff',
          text: 'Nu'
        },
        {
          values: [10],
          backgroundColor: '#9933ff',
          text : 'Xi'
        },
        {
          values: [9],
          backgroundColor: '#9999ff',
          text: 'Omicron'
        }
      ]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: 400, 
    	width: '100%'
    });