• 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.           topState: {
    41.             backgroundColor: 'red',
    42.             offsetX: 10,
    43.             offsetY: 10,
    44.           }
    45.         },
    46.         x: '25%',
    47.         y: '12%',
    48.       },
    49.       plotarea: {
    50.         marginTop: '25%'
    51.       },
    52.       plot: {
    53.         barWidth: '30%',
    54.         stacked: true,
    55.       },
    56.       scaleX: {
    57.         labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M']
    58.       },
    59.       scaleY: {
    60.         values: '0:200:50'
    61.       },
    62.       series: [{
    63.           values: [64, 59, 55, 49, 39, 35, 31, 20, 16, 15, 9, 5, 4],
    64.           text: '0-18 years',
    65.           description: 'depicted in blue.'
    66.         },
    67.         {
    68.           values: [99, 90, 87, 70, 59, 51, 45, 39, 34, 25, 21, 9, 5],
    69.           text: '18-64 years',
    70.           description: 'depicted in red.'
    71.         },
    72.         {
    73.           values: [34, 30, 16, 15, 14, 12, 10, 9, 8, 7, 5, 4, 3],
    74.           text: '65 and over',
    75.           description: 'depicted in green.'
    76.         }
    77.       ]
    78.     };
    79.  
    80.     zingchart.render({
    81.       id: 'myChart',
    82.       data: chartConfig,
    83.       height: 400,
    84.       width: '100%'
    85.     });
    86.   </script>
    87. </body>
    88.  
    89. </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.       topState: {
    26.         backgroundColor: 'red',
    27.         offsetX: 10,
    28.         offsetY: 10,
    29.       }
    30.     },
    31.     x: '25%',
    32.     y: '12%',
    33.   },
    34.   plotarea: {
    35.     marginTop: '25%'
    36.   },
    37.   plot: {
    38.     barWidth: '30%',
    39.     stacked: true,
    40.   },
    41.   scaleX: {
    42.     labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M']
    43.   },
    44.   scaleY: {
    45.     values: '0:200:50'
    46.   },
    47.   series: [{
    48.       values: [64, 59, 55, 49, 39, 35, 31, 20, 16, 15, 9, 5, 4],
    49.       text: '0-18 years',
    50.       description: 'depicted in blue.'
    51.     },
    52.     {
    53.       values: [99, 90, 87, 70, 59, 51, 45, 39, 34, 25, 21, 9, 5],
    54.       text: '18-64 years',
    55.       description: 'depicted in red.'
    56.     },
    57.     {
    58.       values: [34, 30, 16, 15, 14, 12, 10, 9, 8, 7, 5, 4, 3],
    59.       text: '65 and over',
    60.       description: 'depicted in green.'
    61.     }
    62.   ]
    63. };
    64.  
    65. zingchart.render({
    66.   id: 'myChart',
    67.   data: chartConfig,
    68.   height: 400,
    69.   width: '100%'
    70. });