• 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.       graphset: [{
    18.         type: 'null',
    19.         shapes: [{
    20.             type: 'rect',
    21.             id: 'rect',
    22.             borderWidth: 2,
    23.             alpha: 0.5,
    24.             borderColor: '#f0f',
    25.             backgroundColor: '#09f #f09',
    26.             x: 50,
    27.             y: 100,
    28.             width: 50,
    29.             height: 100,
    30.             hoverState: {
    31.               backgroundColor: '#eee',
    32.               alpha: 0.4
    33.             },
    34.             label: {
    35.               text: 'Rect',
    36.               borderColor: '#333',
    37.               borderWidth: 2,
    38.               padding: 5,
    39.               alpha: 0.8
    40.             },
    41.             tooltip: {
    42.               text: 'Rectangle',
    43.               callout: true,
    44.               calloutHeight: 15,
    45.               calloutPosition: 'bottom',
    46.               calloutWidth: 0,
    47.               calloutTip: {
    48.                 type: 'circle',
    49.                 backgroundColor: '#fff',
    50.                 borderWidth: 2,
    51.                 borderColor: '#f60',
    52.                 offsetY: 5,
    53.                 size: 5,
    54.               },
    55.             },
    56.           },
    57.           {
    58.             type: 'circle',
    59.             id: 'mycircle',
    60.             borderWidth: 2,
    61.             borderColor: '#f00',
    62.             backgroundColor: '#FF5722',
    63.             x: 150,
    64.             y: 100,
    65.             size: 40,
    66.             hoverState: {
    67.               backgroundColor: '#ff3d00'
    68.             },
    69.             label: {
    70.               text: 'Circle'
    71.             },
    72.             tooltip: {
    73.               text: 'Circle',
    74.               callout: true,
    75.               calloutHeight: 15,
    76.               calloutPosition: 'bottom',
    77.               calloutWidth: 0,
    78.               calloutTip: {
    79.                 type: 'circle',
    80.                 backgroundColor: '#fff',
    81.                 borderWidth: 2,
    82.                 borderColor: '#f60',
    83.                 offsetY: 5,
    84.                 size: 5,
    85.               },
    86.             },
    87.           },
    88.           {
    89.             type: 'pie',
    90.             id: 'myPie',
    91.             borderWidth: 2,
    92.             borderColor: '#FFC107',
    93.             backgroundColor: '#FFEB3B',
    94.             x: 250,
    95.             y: 100,
    96.             size: 40,
    97.             angleStart: 0,
    98.             angleEnd: 330,
    99.             hoverState: {
    100.               alpha: 1,
    101.               angleEnd: 358,
    102.               backgroundColor: '#39d474',
    103.               borderColor: '#00ac42'
    104.             },
    105.             label: {
    106.               text: 'Pie',
    107.               padding: '2 4',
    108.               offsetY: 20
    109.             },
    110.             tooltip: {
    111.               text: 'Pie',
    112.               callout: true,
    113.               calloutHeight: 15,
    114.               calloutPosition: 'bottom',
    115.               calloutWidth: 0,
    116.               calloutTip: {
    117.                 type: 'circle',
    118.                 backgroundColor: '#fff',
    119.                 borderWidth: 2,
    120.                 borderColor: '#f60',
    121.                 offsetY: 5,
    122.                 size: 5,
    123.               },
    124.             },
    125.           },
    126.           {
    127.             type: 'star5',
    128.             id: 'myStar5',
    129.             borderWidth: 2,
    130.             borderColor: '#01579B',
    131.             backgroundColor: '#0277BD #4FC3F7',
    132.             x: 360,
    133.             y: 100,
    134.             size: 25,
    135.             hoverState: {
    136.               backgroundColor: '#039BE5 #FFF',
    137.               size: 38,
    138.               type: 'star8',
    139.               alpha: 1
    140.             },
    141.             label: {
    142.               text: 'Star 5',
    143.               padding: '2 4'
    144.             },
    145.             tooltip: {
    146.               text: 'Star 5',
    147.               callout: true,
    148.               calloutHeight: 15,
    149.               calloutPosition: 'bottom',
    150.               calloutWidth: 0,
    151.               calloutTip: {
    152.                 type: 'circle',
    153.                 backgroundColor: '#fff',
    154.                 borderWidth: 2,
    155.                 borderColor: '#f60',
    156.                 offsetY: 5,
    157.                 size: 5,
    158.               },
    159.             },
    160.           },
    161.           {
    162.             type: 'star9',
    163.             id: 'myStar9',
    164.             borderWidth: 2,
    165.             borderColor: '#E65100',
    166.             fillType: 'radial',
    167.             gradientColors: '#FFF59D #FFC107 #F4511E',
    168.             gradientStops: '0.1 0.5 0.9',
    169.             x: 500,
    170.             y: 100,
    171.             size: 50,
    172.             label: {
    173.               text: 'Star 9',
    174.               fontColor: '#4d4d4d',
    175.               fontWeight: 'bold',
    176.               fontSize: 20,
    177.               padding: 10
    178.             },
    179.             hoverState: {
    180.               gradientColors: '#FBC02D #FFA000 #E65100',
    181.               gradientStops: '0.1 0.5 0.9'
    182.             },
    183.             tooltip: {
    184.               text: 'Star 9',
    185.               callout: true,
    186.               calloutHeight: 15,
    187.               calloutPosition: 'bottom',
    188.               calloutWidth: 0,
    189.               calloutTip: {
    190.                 type: 'circle',
    191.                 backgroundColor: '#fff',
    192.                 borderWidth: 2,
    193.                 borderColor: '#f60',
    194.                 offsetY: 5,
    195.                 size: 5,
    196.               },
    197.             },
    198.           },
    199.           {
    200.             type: 'pie',
    201.             id: 'myRing',
    202.             borderWidth: 0,
    203.  
    204.             backgroundColor: '#DCEDC8 #7CB342',
    205.             shadow: 0.4,
    206.             shadowDistance: 5,
    207.             hoverState: {
    208.               backgroundColor: '#FFEB3B #F44336',
    209.               angleStart: 180,
    210.               angleEnd: 540
    211.             },
    212.             x: 70,
    213.             y: 230,
    214.             size: 50,
    215.             slice: 30,
    216.             angleStart: 180,
    217.             angleEnd: 450,
    218.             tooltip: {
    219.               text: 'Gauge',
    220.               callout: true,
    221.               calloutHeight: 15,
    222.               calloutPosition: 'bottom',
    223.               calloutWidth: 0,
    224.               calloutTip: {
    225.                 type: 'circle',
    226.                 backgroundColor: '#fff',
    227.                 borderWidth: 2,
    228.                 borderColor: '#f60',
    229.                 offsetY: 5,
    230.                 size: 5,
    231.               },
    232.             },
    233.             label: {
    234.               text: 'Ring'
    235.             },
    236.             tooltip: {
    237.               text: 'Ring',
    238.               callout: true,
    239.               calloutHeight: 15,
    240.               calloutPosition: 'bottom',
    241.               calloutWidth: 0,
    242.               calloutTip: {
    243.                 type: 'circle',
    244.                 backgroundColor: '#fff',
    245.                 borderWidth: 2,
    246.                 borderColor: '#f60',
    247.                 offsetY: 5,
    248.                 size: 5,
    249.               },
    250.             },
    251.           },
    252.           {
    253.             type: 'square',
    254.             id: 'mySquare',
    255.             borderWidth: 5,
    256.             borderColor: 5,
    257.             backgroundColor: '#0277BD',
    258.             x: 200,
    259.             y: 230,
    260.             size: 40,
    261.             label: {
    262.               text: 'Square',
    263.               padding: '2 4'
    264.             },
    265.             tooltip: {
    266.               text: 'I am a square',
    267.               callout: true,
    268.               calloutHeight: 15,
    269.               calloutPosition: 'bottom',
    270.               calloutWidth: 0,
    271.               calloutTip: {
    272.                 type: 'circle',
    273.                 backgroundColor: '#fff',
    274.                 borderWidth: 2,
    275.                 borderColor: '#f60',
    276.                 offsetY: 5,
    277.                 size: 5,
    278.               },
    279.             }
    280.           },
    281.           {
    282.             type: 'diamond',
    283.             id: 'myDiamond',
    284.             borderWidth: 2,
    285.             borderColor: '#00C853',
    286.             backgroundColor: '#00E676',
    287.             x: 330,
    288.             y: 230,
    289.             size: 40,
    290.             label: {
    291.               text: 'Diamond',
    292.               padding: '2 4'
    293.             },
    294.             tooltip: {
    295.               text: 'Diamond',
    296.               callout: true,
    297.               calloutHeight: 15,
    298.               calloutPosition: 'bottom',
    299.               calloutWidth: 0,
    300.               calloutTip: {
    301.                 type: 'circle',
    302.                 backgroundColor: '#fff',
    303.                 borderWidth: 2,
    304.                 borderColor: '#f60',
    305.                 offsetY: 5,
    306.                 size: 5,
    307.               },
    308.             },
    309.           },
    310.           {
    311.             type: 'triangle',
    312.             id: 'myTriangle',
    313.             borderWidth: 2,
    314.             borderColor: '#03A9F4',
    315.             backgroundColor: '#03A9F4',
    316.             x: 480,
    317.             y: 230,
    318.             size: 40,
    319.             tooltip: {
    320.               text: 'I am a triangle',
    321.               callout: true,
    322.               calloutHeight: 15,
    323.               calloutPosition: 'bottom',
    324.               calloutWidth: 0,
    325.               calloutTip: {
    326.                 type: 'circle',
    327.                 backgroundColor: '#fff',
    328.                 borderWidth: 2,
    329.                 borderColor: '#f60',
    330.                 offsetY: 5,
    331.                 size: 5,
    332.               },
    333.             },
    334.             label: {
    335.               offsetY: 50,
    336.               text: 'Triangle'
    337.             },
    338.             tooltip: {
    339.               text: 'Triangle',
    340.               callout: true,
    341.               calloutHeight: 15,
    342.               calloutPosition: 'bottom',
    343.               calloutWidth: 0,
    344.               calloutTip: {
    345.                 type: 'circle',
    346.                 backgroundColor: '#fff',
    347.                 borderWidth: 2,
    348.                 borderColor: '#f60',
    349.                 offsetY: 5,
    350.                 size: 5,
    351.               },
    352.             },
    353.           },
    354.           {
    355.             type: 'plus',
    356.             id: 'myPlus',
    357.             lineWidth: 8,
    358.             lineColor: '#4DB6AC',
    359.             x: 60,
    360.             y: 330,
    361.             size: 30,
    362.             label: {
    363.               text: 'Plus',
    364.               offsetY: 50,
    365.             },
    366.             tooltip: {
    367.               text: 'Plus',
    368.               callout: true,
    369.               calloutHeight: 15,
    370.               calloutPosition: 'bottom',
    371.               calloutWidth: 0,
    372.               calloutTip: {
    373.                 type: 'circle',
    374.                 backgroundColor: '#fff',
    375.                 borderWidth: 2,
    376.                 borderColor: '#f60',
    377.                 offsetY: 5,
    378.                 size: 5,
    379.               },
    380.             },
    381.           },
    382.           {
    383.             type: 'cross',
    384.             id: 'myCross',
    385.             lineWidth: 8,
    386.             lineColor: '#4DB6AC',
    387.             x: 190,
    388.             y: 330,
    389.             size: 30,
    390.             label: {
    391.               text: 'Cross',
    392.               offsetY: 50,
    393.             },
    394.             tooltip: {
    395.               text: 'Cross',
    396.               callout: true,
    397.               calloutHeight: 15,
    398.               calloutPosition: 'bottom',
    399.               calloutWidth: 0,
    400.               calloutTip: {
    401.                 type: 'circle',
    402.                 backgroundColor: '#fff',
    403.                 borderWidth: 2,
    404.                 borderColor: '#f60',
    405.                 offsetY: 5,
    406.                 size: 5,
    407.               },
    408.             },
    409.           },
    410.           {
    411.             type: 'line',
    412.             id: 'myLine',
    413.             lineWidth: 5,
    414.             lineColor: '#F44336',
    415.             points: [
    416.               [280, 310],
    417.               [340, 320],
    418.               [300, 350],
    419.               [380, 340]
    420.             ],
    421.             label: {
    422.               text: 'Line',
    423.               offsetY: 50
    424.             },
    425.             tooltip: {
    426.               text: 'Line',
    427.               callout: true,
    428.               calloutHeight: 15,
    429.               calloutPosition: 'bottom',
    430.               calloutWidth: 0,
    431.               calloutTip: {
    432.                 type: 'circle',
    433.                 backgroundColor: '#fff',
    434.                 borderWidth: 2,
    435.                 borderColor: '#f60',
    436.                 offsetY: 5,
    437.                 size: 5,
    438.               },
    439.             },
    440.           },
    441.           {
    442.             type: 'poly',
    443.             id: 'myPoly',
    444.             lineStyle: 'solid',
    445.             borderWidth: 2,
    446.             shadowDistance: 15,
    447.             borderColor: '#532',
    448.             backgroundColor: '#e91e63',
    449.             points: [
    450.               [450, 310],
    451.               [520, 310],
    452.               [520, 360],
    453.               [400, 380],
    454.               [450, 310],
    455.  
    456.             ],
    457.             label: {
    458.               text: 'Polygon'
    459.             },
    460.             tooltip: {
    461.               text: 'Polygon',
    462.               callout: true,
    463.               calloutHeight: 15,
    464.               calloutPosition: 'bottom',
    465.               calloutWidth: 0,
    466.               calloutTip: {
    467.                 type: 'circle',
    468.                 backgroundColor: '#fff',
    469.                 borderWidth: 2,
    470.                 borderColor: '#f60',
    471.                 offsetY: 5,
    472.                 size: 5,
    473.               },
    474.             },
    475.           }
    476.         ]
    477.       }]
    478.     };
    479.  
    480.     zingchart.render({
    481.       id: 'myChart',
    482.       data: chartConfig,
    483.       height: 400,
    484.       width: 600
    485.     });
    486.   </script>
    487. </body>
    488.  
    489. </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.   graphset: [{
    3.     type: 'null',
    4.     shapes: [{
    5.         type: 'rect',
    6.         id: 'rect',
    7.         borderWidth: 2,
    8.         alpha: 0.5,
    9.         borderColor: '#f0f',
    10.         backgroundColor: '#09f #f09',
    11.         x: 50,
    12.         y: 100,
    13.         width: 50,
    14.         height: 100,
    15.         hoverState: {
    16.           backgroundColor: '#eee',
    17.           alpha: 0.4
    18.         },
    19.         label: {
    20.           text: 'Rect',
    21.           borderColor: '#333',
    22.           borderWidth: 2,
    23.           padding: 5,
    24.           alpha: 0.8
    25.         },
    26.         tooltip: {
    27.           text: 'Rectangle',
    28.           callout: true,
    29.           calloutHeight: 15,
    30.           calloutPosition: 'bottom',
    31.           calloutWidth: 0,
    32.           calloutTip: {
    33.             type: 'circle',
    34.             backgroundColor: '#fff',
    35.             borderWidth: 2,
    36.             borderColor: '#f60',
    37.             offsetY: 5,
    38.             size: 5,
    39.           },
    40.         },
    41.       },
    42.       {
    43.         type: 'circle',
    44.         id: 'mycircle',
    45.         borderWidth: 2,
    46.         borderColor: '#f00',
    47.         backgroundColor: '#FF5722',
    48.         x: 150,
    49.         y: 100,
    50.         size: 40,
    51.         hoverState: {
    52.           backgroundColor: '#ff3d00'
    53.         },
    54.         label: {
    55.           text: 'Circle'
    56.         },
    57.         tooltip: {
    58.           text: 'Circle',
    59.           callout: true,
    60.           calloutHeight: 15,
    61.           calloutPosition: 'bottom',
    62.           calloutWidth: 0,
    63.           calloutTip: {
    64.             type: 'circle',
    65.             backgroundColor: '#fff',
    66.             borderWidth: 2,
    67.             borderColor: '#f60',
    68.             offsetY: 5,
    69.             size: 5,
    70.           },
    71.         },
    72.       },
    73.       {
    74.         type: 'pie',
    75.         id: 'myPie',
    76.         borderWidth: 2,
    77.         borderColor: '#FFC107',
    78.         backgroundColor: '#FFEB3B',
    79.         x: 250,
    80.         y: 100,
    81.         size: 40,
    82.         angleStart: 0,
    83.         angleEnd: 330,
    84.         hoverState: {
    85.           alpha: 1,
    86.           angleEnd: 358,
    87.           backgroundColor: '#39d474',
    88.           borderColor: '#00ac42'
    89.         },
    90.         label: {
    91.           text: 'Pie',
    92.           padding: '2 4',
    93.           offsetY: 20
    94.         },
    95.         tooltip: {
    96.           text: 'Pie',
    97.           callout: true,
    98.           calloutHeight: 15,
    99.           calloutPosition: 'bottom',
    100.           calloutWidth: 0,
    101.           calloutTip: {
    102.             type: 'circle',
    103.             backgroundColor: '#fff',
    104.             borderWidth: 2,
    105.             borderColor: '#f60',
    106.             offsetY: 5,
    107.             size: 5,
    108.           },
    109.         },
    110.       },
    111.       {
    112.         type: 'star5',
    113.         id: 'myStar5',
    114.         borderWidth: 2,
    115.         borderColor: '#01579B',
    116.         backgroundColor: '#0277BD #4FC3F7',
    117.         x: 360,
    118.         y: 100,
    119.         size: 25,
    120.         hoverState: {
    121.           backgroundColor: '#039BE5 #FFF',
    122.           size: 38,
    123.           type: 'star8',
    124.           alpha: 1
    125.         },
    126.         label: {
    127.           text: 'Star 5',
    128.           padding: '2 4'
    129.         },
    130.         tooltip: {
    131.           text: 'Star 5',
    132.           callout: true,
    133.           calloutHeight: 15,
    134.           calloutPosition: 'bottom',
    135.           calloutWidth: 0,
    136.           calloutTip: {
    137.             type: 'circle',
    138.             backgroundColor: '#fff',
    139.             borderWidth: 2,
    140.             borderColor: '#f60',
    141.             offsetY: 5,
    142.             size: 5,
    143.           },
    144.         },
    145.       },
    146.       {
    147.         type: 'star9',
    148.         id: 'myStar9',
    149.         borderWidth: 2,
    150.         borderColor: '#E65100',
    151.         fillType: 'radial',
    152.         gradientColors: '#FFF59D #FFC107 #F4511E',
    153.         gradientStops: '0.1 0.5 0.9',
    154.         x: 500,
    155.         y: 100,
    156.         size: 50,
    157.         label: {
    158.           text: 'Star 9',
    159.           fontColor: '#4d4d4d',
    160.           fontWeight: 'bold',
    161.           fontSize: 20,
    162.           padding: 10
    163.         },
    164.         hoverState: {
    165.           gradientColors: '#FBC02D #FFA000 #E65100',
    166.           gradientStops: '0.1 0.5 0.9'
    167.         },
    168.         tooltip: {
    169.           text: 'Star 9',
    170.           callout: true,
    171.           calloutHeight: 15,
    172.           calloutPosition: 'bottom',
    173.           calloutWidth: 0,
    174.           calloutTip: {
    175.             type: 'circle',
    176.             backgroundColor: '#fff',
    177.             borderWidth: 2,
    178.             borderColor: '#f60',
    179.             offsetY: 5,
    180.             size: 5,
    181.           },
    182.         },
    183.       },
    184.       {
    185.         type: 'pie',
    186.         id: 'myRing',
    187.         borderWidth: 0,
    188.  
    189.         backgroundColor: '#DCEDC8 #7CB342',
    190.         shadow: 0.4,
    191.         shadowDistance: 5,
    192.         hoverState: {
    193.           backgroundColor: '#FFEB3B #F44336',
    194.           angleStart: 180,
    195.           angleEnd: 540
    196.         },
    197.         x: 70,
    198.         y: 230,
    199.         size: 50,
    200.         slice: 30,
    201.         angleStart: 180,
    202.         angleEnd: 450,
    203.         tooltip: {
    204.           text: 'Gauge',
    205.           callout: true,
    206.           calloutHeight: 15,
    207.           calloutPosition: 'bottom',
    208.           calloutWidth: 0,
    209.           calloutTip: {
    210.             type: 'circle',
    211.             backgroundColor: '#fff',
    212.             borderWidth: 2,
    213.             borderColor: '#f60',
    214.             offsetY: 5,
    215.             size: 5,
    216.           },
    217.         },
    218.         label: {
    219.           text: 'Ring'
    220.         },
    221.         tooltip: {
    222.           text: 'Ring',
    223.           callout: true,
    224.           calloutHeight: 15,
    225.           calloutPosition: 'bottom',
    226.           calloutWidth: 0,
    227.           calloutTip: {
    228.             type: 'circle',
    229.             backgroundColor: '#fff',
    230.             borderWidth: 2,
    231.             borderColor: '#f60',
    232.             offsetY: 5,
    233.             size: 5,
    234.           },
    235.         },
    236.       },
    237.       {
    238.         type: 'square',
    239.         id: 'mySquare',
    240.         borderWidth: 5,
    241.         borderColor: 5,
    242.         backgroundColor: '#0277BD',
    243.         x: 200,
    244.         y: 230,
    245.         size: 40,
    246.         label: {
    247.           text: 'Square',
    248.           padding: '2 4'
    249.         },
    250.         tooltip: {
    251.           text: 'I am a square',
    252.           callout: true,
    253.           calloutHeight: 15,
    254.           calloutPosition: 'bottom',
    255.           calloutWidth: 0,
    256.           calloutTip: {
    257.             type: 'circle',
    258.             backgroundColor: '#fff',
    259.             borderWidth: 2,
    260.             borderColor: '#f60',
    261.             offsetY: 5,
    262.             size: 5,
    263.           },
    264.         }
    265.       },
    266.       {
    267.         type: 'diamond',
    268.         id: 'myDiamond',
    269.         borderWidth: 2,
    270.         borderColor: '#00C853',
    271.         backgroundColor: '#00E676',
    272.         x: 330,
    273.         y: 230,
    274.         size: 40,
    275.         label: {
    276.           text: 'Diamond',
    277.           padding: '2 4'
    278.         },
    279.         tooltip: {
    280.           text: 'Diamond',
    281.           callout: true,
    282.           calloutHeight: 15,
    283.           calloutPosition: 'bottom',
    284.           calloutWidth: 0,
    285.           calloutTip: {
    286.             type: 'circle',
    287.             backgroundColor: '#fff',
    288.             borderWidth: 2,
    289.             borderColor: '#f60',
    290.             offsetY: 5,
    291.             size: 5,
    292.           },
    293.         },
    294.       },
    295.       {
    296.         type: 'triangle',
    297.         id: 'myTriangle',
    298.         borderWidth: 2,
    299.         borderColor: '#03A9F4',
    300.         backgroundColor: '#03A9F4',
    301.         x: 480,
    302.         y: 230,
    303.         size: 40,
    304.         tooltip: {
    305.           text: 'I am a triangle',
    306.           callout: true,
    307.           calloutHeight: 15,
    308.           calloutPosition: 'bottom',
    309.           calloutWidth: 0,
    310.           calloutTip: {
    311.             type: 'circle',
    312.             backgroundColor: '#fff',
    313.             borderWidth: 2,
    314.             borderColor: '#f60',
    315.             offsetY: 5,
    316.             size: 5,
    317.           },
    318.         },
    319.         label: {
    320.           offsetY: 50,
    321.           text: 'Triangle'
    322.         },
    323.         tooltip: {
    324.           text: 'Triangle',
    325.           callout: true,
    326.           calloutHeight: 15,
    327.           calloutPosition: 'bottom',
    328.           calloutWidth: 0,
    329.           calloutTip: {
    330.             type: 'circle',
    331.             backgroundColor: '#fff',
    332.             borderWidth: 2,
    333.             borderColor: '#f60',
    334.             offsetY: 5,
    335.             size: 5,
    336.           },
    337.         },
    338.       },
    339.       {
    340.         type: 'plus',
    341.         id: 'myPlus',
    342.         lineWidth: 8,
    343.         lineColor: '#4DB6AC',
    344.         x: 60,
    345.         y: 330,
    346.         size: 30,
    347.         label: {
    348.           text: 'Plus',
    349.           offsetY: 50,
    350.         },
    351.         tooltip: {
    352.           text: 'Plus',
    353.           callout: true,
    354.           calloutHeight: 15,
    355.           calloutPosition: 'bottom',
    356.           calloutWidth: 0,
    357.           calloutTip: {
    358.             type: 'circle',
    359.             backgroundColor: '#fff',
    360.             borderWidth: 2,
    361.             borderColor: '#f60',
    362.             offsetY: 5,
    363.             size: 5,
    364.           },
    365.         },
    366.       },
    367.       {
    368.         type: 'cross',
    369.         id: 'myCross',
    370.         lineWidth: 8,
    371.         lineColor: '#4DB6AC',
    372.         x: 190,
    373.         y: 330,
    374.         size: 30,
    375.         label: {
    376.           text: 'Cross',
    377.           offsetY: 50,
    378.         },
    379.         tooltip: {
    380.           text: 'Cross',
    381.           callout: true,
    382.           calloutHeight: 15,
    383.           calloutPosition: 'bottom',
    384.           calloutWidth: 0,
    385.           calloutTip: {
    386.             type: 'circle',
    387.             backgroundColor: '#fff',
    388.             borderWidth: 2,
    389.             borderColor: '#f60',
    390.             offsetY: 5,
    391.             size: 5,
    392.           },
    393.         },
    394.       },
    395.       {
    396.         type: 'line',
    397.         id: 'myLine',
    398.         lineWidth: 5,
    399.         lineColor: '#F44336',
    400.         points: [
    401.           [280, 310],
    402.           [340, 320],
    403.           [300, 350],
    404.           [380, 340]
    405.         ],
    406.         label: {
    407.           text: 'Line',
    408.           offsetY: 50
    409.         },
    410.         tooltip: {
    411.           text: 'Line',
    412.           callout: true,
    413.           calloutHeight: 15,
    414.           calloutPosition: 'bottom',
    415.           calloutWidth: 0,
    416.           calloutTip: {
    417.             type: 'circle',
    418.             backgroundColor: '#fff',
    419.             borderWidth: 2,
    420.             borderColor: '#f60',
    421.             offsetY: 5,
    422.             size: 5,
    423.           },
    424.         },
    425.       },
    426.       {
    427.         type: 'poly',
    428.         id: 'myPoly',
    429.         lineStyle: 'solid',
    430.         borderWidth: 2,
    431.         shadowDistance: 15,
    432.         borderColor: '#532',
    433.         backgroundColor: '#e91e63',
    434.         points: [
    435.           [450, 310],
    436.           [520, 310],
    437.           [520, 360],
    438.           [400, 380],
    439.           [450, 310],
    440.  
    441.         ],
    442.         label: {
    443.           text: 'Polygon'
    444.         },
    445.         tooltip: {
    446.           text: 'Polygon',
    447.           callout: true,
    448.           calloutHeight: 15,
    449.           calloutPosition: 'bottom',
    450.           calloutWidth: 0,
    451.           calloutTip: {
    452.             type: 'circle',
    453.             backgroundColor: '#fff',
    454.             borderWidth: 2,
    455.             borderColor: '#f60',
    456.             offsetY: 5,
    457.             size: 5,
    458.           },
    459.         },
    460.       }
    461.     ]
    462.   }]
    463. };
    464.  
    465. zingchart.render({
    466.   id: 'myChart',
    467.   data: chartConfig,
    468.   height: 400,
    469.   width: 600
    470. });