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