• 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>
    10.     html,
    11.     body,
    12.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     let chartConfig = {
    24.       type: 'bar',
    25.       plot: {
    26.         valueBox: {}
    27.       },
    28.       scaleX: {
    29.         labels: ['Q1', 'Q2', 'Q3', 'Q4']
    30.       },
    31.       scaleY: {
    32.         values: '0:100:25'
    33.       },
    34.       series: [{
    35.           values: [30, 59, 33, 81],
    36.           valueBox: {
    37.             backgroundColor: '#f90',
    38.             borderColor: '#f60',
    39.             borderRadius: -5,
    40.             borderWidth: 2,
    41.             callout: true,
    42.             calloutHeight: 30,
    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.             }
    54.           }
    55.         },
    56.         {
    57.           values: [34, 64, 40, 85]
    58.         }
    59.       ]
    60.     };
    61.  
    62.     zingchart.render({
    63.       id: 'myChart',
    64.       data: chartConfig,
    65.       height: 400,
    66.       width: '100%'
    67.     });
    68.   </script>
    69. </body>
    70.  
    71. </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. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    1. let chartConfig = {
    2.   type: 'bar',
    3.   plot: {
    4.     valueBox: {}
    5.   },
    6.   scaleX: {
    7.     labels: ['Q1', 'Q2', 'Q3', 'Q4']
    8.   },
    9.   scaleY: {
    10.     values: '0:100:25'
    11.   },
    12.   series: [{
    13.       values: [30, 59, 33, 81],
    14.       valueBox: {
    15.         backgroundColor: '#f90',
    16.         borderColor: '#f60',
    17.         borderRadius: -5,
    18.         borderWidth: 2,
    19.         callout: true,
    20.         calloutHeight: 30,
    21.         calloutPosition: 'bottom',
    22.         calloutWidth: 0,
    23.         padding: 10,
    24.         shadow: true,
    25.         calloutTip: {
    26.           type: 'circle',
    27.           backgroundColor: '#fff',
    28.           borderWidth: 2,
    29.           borderColor: '#f60',
    30.           size: 5,
    31.         }
    32.       }
    33.     },
    34.     {
    35.       values: [34, 64, 40, 85]
    36.     }
    37.   ]
    38. };
    39.  
    40. zingchart.render({
    41.   id: 'myChart',
    42.   data: chartConfig,
    43.   height: 400,
    44.   width: '100%'
    45. });