• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     let chartConfig = {
    17.       type: 'bar',
    18.       title: {
    19.         text: 'Legend Tooltips'
    20.       },
    21.       legend: {
    22.         align: 'center',
    23.         layout: 'horizontal',
    24.         offsetY: '50px',
    25.         tooltip: { //Legend Tooltips
    26.           text: 'The %t population is %plot-description',
    27.           backgroundCcolor: 'white',
    28.           borderWidth: 1,
    29.           borderColor: 'gray',
    30.           borderRadius: '5px',
    31.           fontColor: 'black',
    32.           fontFamily: 'Georgia',
    33.           height: '20%',
    34.           padding: '5%',
    35.           sticky: true,
    36.           timeout: 10000,
    37.           width: '20%',
    38.           wrapText: true,
    39.  
    40.  
    41.           backgroundColor: '#f90',
    42.           borderColor: '#f60',
    43.           borderRadius: -5,
    44.           borderWidth: 2,
    45.           callout: true,
    46.           calloutHeight: 30,
    47.           calloutPosition: 'bottom',
    48.           calloutWidth: 0,
    49.           padding: 10,
    50.           shadow: true,
    51.           calloutTip: {
    52.             type: 'circle',
    53.             backgroundColor: '#fff',
    54.             borderWidth: 2,
    55.             borderColor: '#f60',
    56.             size: 5,
    57.           }
    58.         },
    59.         x: '25%',
    60.         y: '12%',
    61.       },
    62.       plotarea: {
    63.         marginTop: '25%'
    64.       },
    65.       plot: {
    66.         barWidth: '30%',
    67.         stacked: true,
    68.       },
    69.       scaleX: {
    70.         labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M']
    71.       },
    72.       scaleY: {
    73.         values: '0:200:50'
    74.       },
    75.       series: [{
    76.           values: [64, 59, 55, 49, 39, 35, 31, 20, 16, 15, 9, 5, 4],
    77.           text: '0-18 years',
    78.           description: 'depicted in blue.'
    79.         },
    80.         {
    81.           values: [99, 90, 87, 70, 59, 51, 45, 39, 34, 25, 21, 9, 5],
    82.           text: '18-64 years',
    83.           description: 'depicted in red.'
    84.         },
    85.         {
    86.           values: [34, 30, 16, 15, 14, 12, 10, 9, 8, 7, 5, 4, 3],
    87.           text: '65 and over',
    88.           description: 'depicted in green.'
    89.         }
    90.       ]
    91.     };
    92.  
    93.     zingchart.render({
    94.       id: 'myChart',
    95.       data: chartConfig,
    96.       height: 400,
    97.       width: '100%'
    98.     });
    99.   </script>
    100. </body>
    101.  
    102. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id='myChart'></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. let chartConfig = {
    2.   type: 'bar',
    3.   title: {
    4.     text: 'Legend Tooltips'
    5.   },
    6.   legend: {
    7.     align: 'center',
    8.     layout: 'horizontal',
    9.     offsetY: '50px',
    10.     tooltip: { //Legend Tooltips
    11.       text: 'The %t population is %plot-description',
    12.       backgroundCcolor: 'white',
    13.       borderWidth: 1,
    14.       borderColor: 'gray',
    15.       borderRadius: '5px',
    16.       fontColor: 'black',
    17.       fontFamily: 'Georgia',
    18.       height: '20%',
    19.       padding: '5%',
    20.       sticky: true,
    21.       timeout: 10000,
    22.       width: '20%',
    23.       wrapText: true,
    24.  
    25.  
    26.       backgroundColor: '#f90',
    27.       borderColor: '#f60',
    28.       borderRadius: -5,
    29.       borderWidth: 2,
    30.       callout: true,
    31.       calloutHeight: 30,
    32.       calloutPosition: 'bottom',
    33.       calloutWidth: 0,
    34.       padding: 10,
    35.       shadow: true,
    36.       calloutTip: {
    37.         type: 'circle',
    38.         backgroundColor: '#fff',
    39.         borderWidth: 2,
    40.         borderColor: '#f60',
    41.         size: 5,
    42.       }
    43.     },
    44.     x: '25%',
    45.     y: '12%',
    46.   },
    47.   plotarea: {
    48.     marginTop: '25%'
    49.   },
    50.   plot: {
    51.     barWidth: '30%',
    52.     stacked: true,
    53.   },
    54.   scaleX: {
    55.     labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M']
    56.   },
    57.   scaleY: {
    58.     values: '0:200:50'
    59.   },
    60.   series: [{
    61.       values: [64, 59, 55, 49, 39, 35, 31, 20, 16, 15, 9, 5, 4],
    62.       text: '0-18 years',
    63.       description: 'depicted in blue.'
    64.     },
    65.     {
    66.       values: [99, 90, 87, 70, 59, 51, 45, 39, 34, 25, 21, 9, 5],
    67.       text: '18-64 years',
    68.       description: 'depicted in red.'
    69.     },
    70.     {
    71.       values: [34, 30, 16, 15, 14, 12, 10, 9, 8, 7, 5, 4, 3],
    72.       text: '65 and over',
    73.       description: 'depicted in green.'
    74.     }
    75.   ]
    76. };
    77.  
    78. zingchart.render({
    79.   id: 'myChart',
    80.   data: chartConfig,
    81.   height: 400,
    82.   width: '100%'
    83. });