• 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.     zingchart.loadModules('maps, maps-usa', function(e) {
    17.       zingchart.render({
    18.         id: 'myChart',
    19.         data: {
    20.           shapes: [{
    21.             type: 'zingchart.maps',
    22.             options: {
    23.               name: 'usa',
    24.               style: {
    25.                 items: {
    26.  
    27.                   //Northeast:
    28.                   CT: {
    29.                     group: 1,
    30.                     backgroundColor: '#FFCDD2',
    31.                     hoverState: {
    32.                       backgroundColor: '#EF9A9A'
    33.                     }
    34.                   },
    35.                   ME: {
    36.                     group: 1,
    37.                     backgroundColor: '#FFCDD2',
    38.                     hoverState: {
    39.                       backgroundColor: '#EF9A9A'
    40.                     },
    41.                     tooltip: {
    42.                       bold: true,
    43.                       fontColor: 'red',
    44.                       topState: {
    45.                         backgroundColor: 'red',
    46.                         offsetX: 10,
    47.                         offsetY: 10
    48.                       }
    49.                     }
    50.                   },
    51.                   MA: {
    52.                     group: 1,
    53.                     backgroundColor: '#FFCDD2',
    54.                     hoverState: {
    55.                       backgroundColor: '#EF9A9A'
    56.                     }
    57.                   },
    58.                   NH: {
    59.                     group: 1,
    60.                     backgroundColor: '#FFCDD2',
    61.                     hoverState: {
    62.                       backgroundColor: '#EF9A9A'
    63.                     }
    64.                   },
    65.                   RI: {
    66.                     group: 1,
    67.                     backgroundColor: '#FFCDD2',
    68.                     hoverState: {
    69.                       backgroundColor: '#EF9A9A'
    70.                     }
    71.                   },
    72.                   VT: {
    73.                     group: 1,
    74.                     backgroundColor: '#FFCDD2',
    75.                     hoverState: {
    76.                       backgroundColor: '#EF9A9A'
    77.                     }
    78.                   },
    79.                   DE: {
    80.                     group: 1,
    81.                     backgroundColor: '#FFCDD2',
    82.                     hoverState: {
    83.                       backgroundColor: '#EF9A9A'
    84.                     }
    85.                   },
    86.                   NJ: {
    87.                     group: 1,
    88.                     backgroundColor: '#FFCDD2',
    89.                     hoverState: {
    90.                       backgroundColor: '#EF9A9A'
    91.                     }
    92.                   },
    93.                   NY: {
    94.                     group: 1,
    95.                     backgroundColor: '#FFCDD2',
    96.                     hoverState: {
    97.                       backgroundColor: '#EF9A9A'
    98.                     }
    99.                   },
    100.                   PA: {
    101.                     group: 1,
    102.                     backgroundColor: '#FFCDD2',
    103.                     hoverState: {
    104.                       backgroundColor: '#EF9A9A'
    105.                     }
    106.                   },
    107.  
    108.                   //Midwest:
    109.                   IL: {
    110.                     group: 2,
    111.                     backgroundColor: '#FFE0B2',
    112.                     hoverState: {
    113.                       backgroundColor: '#FFB74D'
    114.                     }
    115.                   },
    116.                   IN: {
    117.                     group: 2,
    118.                     backgroundColor: '#FFE0B2',
    119.                     hoverState: {
    120.                       backgroundColor: '#FFB74D'
    121.                     }
    122.                   },
    123.                   MI: {
    124.                     group: 2,
    125.                     backgroundColor: '#FFE0B2',
    126.                     hoverState: {
    127.                       backgroundColor: '#FFB74D'
    128.                     }
    129.                   },
    130.                   OH: {
    131.                     group: 2,
    132.                     backgroundColor: '#FFE0B2',
    133.                     hoverState: {
    134.                       backgroundColor: '#FFB74D'
    135.                     }
    136.                   },
    137.                   WI: {
    138.                     group: 2,
    139.                     backgroundColor: '#FFE0B2',
    140.                     hoverState: {
    141.                       backgroundColor: '#FFB74D'
    142.                     }
    143.                   },
    144.                   IA: {
    145.                     group: 2,
    146.                     backgroundColor: '#FFE0B2',
    147.                     hoverState: {
    148.                       backgroundColor: '#FFB74D'
    149.                     }
    150.                   },
    151.                   KS: {
    152.                     group: 2,
    153.                     backgroundColor: '#FFE0B2',
    154.                     hoverState: {
    155.                       backgroundColor: '#FFB74D'
    156.                     }
    157.                   },
    158.                   MN: {
    159.                     group: 2,
    160.                     backgroundColor: '#FFE0B2',
    161.                     hoverState: {
    162.                       backgroundColor: '#FFB74D'
    163.                     }
    164.                   },
    165.                   MO: {
    166.                     group: 2,
    167.                     backgroundColor: '#FFE0B2',
    168.                     hoverState: {
    169.                       backgroundColor: '#FFB74D'
    170.                     }
    171.                   },
    172.                   NE: {
    173.                     group: 2,
    174.                     backgroundColor: '#FFE0B2',
    175.                     hoverState: {
    176.                       backgroundColor: '#FFB74D'
    177.                     }
    178.                   },
    179.                   ND: {
    180.                     group: 2,
    181.                     backgroundColor: '#FFE0B2',
    182.                     hoverState: {
    183.                       backgroundColor: '#FFB74D'
    184.                     }
    185.                   },
    186.                   SD: {
    187.                     group: 2,
    188.                     backgroundColor: '#FFE0B2',
    189.                     hoverState: {
    190.                       backgroundColor: '#FFB74D'
    191.                     }
    192.                   },
    193.  
    194.                   //South:
    195.                   FL: {
    196.                     group: 3,
    197.                     backgroundColor: '#C8E6C9',
    198.                     hoverState: {
    199.                       backgroundColor: '#81C784'
    200.                     }
    201.                   },
    202.                   GA: {
    203.                     group: 3,
    204.                     backgroundColor: '#C8E6C9',
    205.                     hoverState: {
    206.                       backgroundColor: '#81C784'
    207.                     }
    208.                   },
    209.                   MD: {
    210.                     group: 3,
    211.                     backgroundColor: '#C8E6C9',
    212.                     hoverState: {
    213.                       backgroundColor: '#81C784'
    214.                     }
    215.                   },
    216.                   NC: {
    217.                     group: 3,
    218.                     backgroundColor: '#C8E6C9',
    219.                     hoverState: {
    220.                       backgroundColor: '#81C784'
    221.                     }
    222.                   },
    223.                   SC: {
    224.                     group: 3,
    225.                     backgroundColor: '#C8E6C9',
    226.                     hoverState: {
    227.                       backgroundColor: '#81C784'
    228.                     }
    229.                   },
    230.                   VA: {
    231.                     group: 3,
    232.                     backgroundColor: '#C8E6C9',
    233.                     hoverState: {
    234.                       backgroundColor: '#81C784'
    235.                     }
    236.                   },
    237.                   DC: {
    238.                     group: 3,
    239.                     backgroundColor: '#C8E6C9',
    240.                     hoverState: {
    241.                       backgroundColor: '#81C784'
    242.                     }
    243.                   },
    244.                   WV: {
    245.                     group: 3,
    246.                     backgroundColor: '#C8E6C9',
    247.                     hoverState: {
    248.                       backgroundColor: '#81C784'
    249.                     }
    250.                   },
    251.                   AL: {
    252.                     group: 3,
    253.                     backgroundColor: '#C8E6C9',
    254.                     hoverState: {
    255.                       backgroundColor: '#81C784'
    256.                     }
    257.                   },
    258.                   KY: {
    259.                     group: 3,
    260.                     backgroundColor: '#C8E6C9',
    261.                     hoverState: {
    262.                       backgroundColor: '#81C784'
    263.                     }
    264.                   },
    265.                   MS: {
    266.                     group: 3,
    267.                     backgroundColor: '#C8E6C9',
    268.                     hoverState: {
    269.                       backgroundColor: '#81C784'
    270.                     }
    271.                   },
    272.                   TN: {
    273.                     group: 3,
    274.                     backgroundColor: '#C8E6C9',
    275.                     hoverState: {
    276.                       backgroundColor: '#81C784'
    277.                     }
    278.                   },
    279.                   AR: {
    280.                     group: 3,
    281.                     backgroundColor: '#C8E6C9',
    282.                     hoverState: {
    283.                       backgroundColor: '#81C784'
    284.                     }
    285.                   },
    286.                   LA: {
    287.                     group: 3,
    288.                     backgroundColor: '#C8E6C9',
    289.                     hoverState: {
    290.                       backgroundColor: '#81C784'
    291.                     }
    292.                   },
    293.                   OK: {
    294.                     group: 3,
    295.                     backgroundColor: '#C8E6C9',
    296.                     hoverState: {
    297.                       backgroundColor: '#81C784'
    298.                     }
    299.                   },
    300.                   TX: {
    301.                     group: 3,
    302.                     backgroundColor: '#C8E6C9',
    303.                     hoverState: {
    304.                       backgroundColor: '#81C784'
    305.                     }
    306.                   },
    307.  
    308.                   //West:
    309.                   AZ: {
    310.                     group: 4,
    311.                     backgroundColor: '#BBDEFB',
    312.                     hoverState: {
    313.                       backgroundColor: '#64B5F6'
    314.                     }
    315.                   },
    316.                   CO: {
    317.                     group: 4,
    318.                     backgroundColor: '#BBDEFB',
    319.                     hoverState: {
    320.                       backgroundColor: '#64B5F6'
    321.                     }
    322.                   },
    323.                   ID: {
    324.                     group: 4,
    325.                     backgroundColor: '#BBDEFB',
    326.                     hoverState: {
    327.                       backgroundColor: '#64B5F6'
    328.                     }
    329.                   },
    330.                   MT: {
    331.                     group: 4,
    332.                     backgroundColor: '#BBDEFB',
    333.                     hoverState: {
    334.                       backgroundColor: '#64B5F6'
    335.                     }
    336.                   },
    337.                   NV: {
    338.                     group: 4,
    339.                     backgroundColor: '#BBDEFB',
    340.                     hoverState: {
    341.                       backgroundColor: '#64B5F6'
    342.                     }
    343.                   },
    344.                   NM: {
    345.                     group: 4,
    346.                     backgroundColor: '#BBDEFB',
    347.                     hoverState: {
    348.                       backgroundColor: '#64B5F6'
    349.                     }
    350.                   },
    351.                   UT: {
    352.                     group: 4,
    353.                     backgroundColor: '#BBDEFB',
    354.                     hoverState: {
    355.                       backgroundColor: '#64B5F6'
    356.                     }
    357.                   },
    358.                   WY: {
    359.                     group: 4,
    360.                     backgroundColor: '#BBDEFB',
    361.                     hoverState: {
    362.                       backgroundColor: '#64B5F6'
    363.                     }
    364.                   },
    365.                   AK: {
    366.                     group: 4,
    367.                     backgroundColor: '#BBDEFB',
    368.                     hoverState: {
    369.                       backgroundColor: '#64B5F6'
    370.                     }
    371.                   },
    372.                   CA: {
    373.                     group: 4,
    374.                     backgroundColor: '#BBDEFB',
    375.                     hoverState: {
    376.                       backgroundColor: '#64B5F6'
    377.                     }
    378.                   },
    379.                   HI: {
    380.                     group: 4,
    381.                     backgroundColor: '#BBDEFB',
    382.                     hoverState: {
    383.                       backgroundColor: '#64B5F6'
    384.                     }
    385.                   },
    386.                   OR: {
    387.                     group: 4,
    388.                     backgroundColor: '#BBDEFB',
    389.                     hoverState: {
    390.                       backgroundColor: '#64B5F6'
    391.                     }
    392.                   },
    393.                   WA: {
    394.                     group: 4,
    395.                     backgroundColor: '#BBDEFB',
    396.                     hoverState: {
    397.                       backgroundColor: '#64B5F6'
    398.                     }
    399.                   }
    400.                 },
    401.                 tooltip: {
    402.                   alpha: 0.5,
    403.                   backgroundColor: 'white',
    404.                   borderColor: 'white',
    405.                   borderRadius: 3,
    406.                   fontColor: 'black',
    407.                   fontFamily: 'Georgia',
    408.                   fontSize: 12,
    409.                   textAlpha: 1
    410.                 }
    411.               }
    412.             }
    413.           }]
    414.         },
    415.         height: 400,
    416.         width: '100%'
    417.       });
    418.     });
    419.   </script>
    420. </body>
    421.  
    422. </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. zingchart.loadModules('maps, maps-usa', function(e) {
    2.   zingchart.render({
    3.     id: 'myChart',
    4.     data: {
    5.       shapes: [{
    6.         type: 'zingchart.maps',
    7.         options: {
    8.           name: 'usa',
    9.           style: {
    10.             items: {
    11.  
    12.               //Northeast:
    13.               CT: {
    14.                 group: 1,
    15.                 backgroundColor: '#FFCDD2',
    16.                 hoverState: {
    17.                   backgroundColor: '#EF9A9A'
    18.                 }
    19.               },
    20.               ME: {
    21.                 group: 1,
    22.                 backgroundColor: '#FFCDD2',
    23.                 hoverState: {
    24.                   backgroundColor: '#EF9A9A'
    25.                 },
    26.                 tooltip: {
    27.                   bold: true,
    28.                   fontColor: 'red',
    29.                   topState: {
    30.                     backgroundColor: 'red',
    31.                     offsetX: 10,
    32.                     offsetY: 10
    33.                   }
    34.                 }
    35.               },
    36.               MA: {
    37.                 group: 1,
    38.                 backgroundColor: '#FFCDD2',
    39.                 hoverState: {
    40.                   backgroundColor: '#EF9A9A'
    41.                 }
    42.               },
    43.               NH: {
    44.                 group: 1,
    45.                 backgroundColor: '#FFCDD2',
    46.                 hoverState: {
    47.                   backgroundColor: '#EF9A9A'
    48.                 }
    49.               },
    50.               RI: {
    51.                 group: 1,
    52.                 backgroundColor: '#FFCDD2',
    53.                 hoverState: {
    54.                   backgroundColor: '#EF9A9A'
    55.                 }
    56.               },
    57.               VT: {
    58.                 group: 1,
    59.                 backgroundColor: '#FFCDD2',
    60.                 hoverState: {
    61.                   backgroundColor: '#EF9A9A'
    62.                 }
    63.               },
    64.               DE: {
    65.                 group: 1,
    66.                 backgroundColor: '#FFCDD2',
    67.                 hoverState: {
    68.                   backgroundColor: '#EF9A9A'
    69.                 }
    70.               },
    71.               NJ: {
    72.                 group: 1,
    73.                 backgroundColor: '#FFCDD2',
    74.                 hoverState: {
    75.                   backgroundColor: '#EF9A9A'
    76.                 }
    77.               },
    78.               NY: {
    79.                 group: 1,
    80.                 backgroundColor: '#FFCDD2',
    81.                 hoverState: {
    82.                   backgroundColor: '#EF9A9A'
    83.                 }
    84.               },
    85.               PA: {
    86.                 group: 1,
    87.                 backgroundColor: '#FFCDD2',
    88.                 hoverState: {
    89.                   backgroundColor: '#EF9A9A'
    90.                 }
    91.               },
    92.  
    93.               //Midwest:
    94.               IL: {
    95.                 group: 2,
    96.                 backgroundColor: '#FFE0B2',
    97.                 hoverState: {
    98.                   backgroundColor: '#FFB74D'
    99.                 }
    100.               },
    101.               IN: {
    102.                 group: 2,
    103.                 backgroundColor: '#FFE0B2',
    104.                 hoverState: {
    105.                   backgroundColor: '#FFB74D'
    106.                 }
    107.               },
    108.               MI: {
    109.                 group: 2,
    110.                 backgroundColor: '#FFE0B2',
    111.                 hoverState: {
    112.                   backgroundColor: '#FFB74D'
    113.                 }
    114.               },
    115.               OH: {
    116.                 group: 2,
    117.                 backgroundColor: '#FFE0B2',
    118.                 hoverState: {
    119.                   backgroundColor: '#FFB74D'
    120.                 }
    121.               },
    122.               WI: {
    123.                 group: 2,
    124.                 backgroundColor: '#FFE0B2',
    125.                 hoverState: {
    126.                   backgroundColor: '#FFB74D'
    127.                 }
    128.               },
    129.               IA: {
    130.                 group: 2,
    131.                 backgroundColor: '#FFE0B2',
    132.                 hoverState: {
    133.                   backgroundColor: '#FFB74D'
    134.                 }
    135.               },
    136.               KS: {
    137.                 group: 2,
    138.                 backgroundColor: '#FFE0B2',
    139.                 hoverState: {
    140.                   backgroundColor: '#FFB74D'
    141.                 }
    142.               },
    143.               MN: {
    144.                 group: 2,
    145.                 backgroundColor: '#FFE0B2',
    146.                 hoverState: {
    147.                   backgroundColor: '#FFB74D'
    148.                 }
    149.               },
    150.               MO: {
    151.                 group: 2,
    152.                 backgroundColor: '#FFE0B2',
    153.                 hoverState: {
    154.                   backgroundColor: '#FFB74D'
    155.                 }
    156.               },
    157.               NE: {
    158.                 group: 2,
    159.                 backgroundColor: '#FFE0B2',
    160.                 hoverState: {
    161.                   backgroundColor: '#FFB74D'
    162.                 }
    163.               },
    164.               ND: {
    165.                 group: 2,
    166.                 backgroundColor: '#FFE0B2',
    167.                 hoverState: {
    168.                   backgroundColor: '#FFB74D'
    169.                 }
    170.               },
    171.               SD: {
    172.                 group: 2,
    173.                 backgroundColor: '#FFE0B2',
    174.                 hoverState: {
    175.                   backgroundColor: '#FFB74D'
    176.                 }
    177.               },
    178.  
    179.               //South:
    180.               FL: {
    181.                 group: 3,
    182.                 backgroundColor: '#C8E6C9',
    183.                 hoverState: {
    184.                   backgroundColor: '#81C784'
    185.                 }
    186.               },
    187.               GA: {
    188.                 group: 3,
    189.                 backgroundColor: '#C8E6C9',
    190.                 hoverState: {
    191.                   backgroundColor: '#81C784'
    192.                 }
    193.               },
    194.               MD: {
    195.                 group: 3,
    196.                 backgroundColor: '#C8E6C9',
    197.                 hoverState: {
    198.                   backgroundColor: '#81C784'
    199.                 }
    200.               },
    201.               NC: {
    202.                 group: 3,
    203.                 backgroundColor: '#C8E6C9',
    204.                 hoverState: {
    205.                   backgroundColor: '#81C784'
    206.                 }
    207.               },
    208.               SC: {
    209.                 group: 3,
    210.                 backgroundColor: '#C8E6C9',
    211.                 hoverState: {
    212.                   backgroundColor: '#81C784'
    213.                 }
    214.               },
    215.               VA: {
    216.                 group: 3,
    217.                 backgroundColor: '#C8E6C9',
    218.                 hoverState: {
    219.                   backgroundColor: '#81C784'
    220.                 }
    221.               },
    222.               DC: {
    223.                 group: 3,
    224.                 backgroundColor: '#C8E6C9',
    225.                 hoverState: {
    226.                   backgroundColor: '#81C784'
    227.                 }
    228.               },
    229.               WV: {
    230.                 group: 3,
    231.                 backgroundColor: '#C8E6C9',
    232.                 hoverState: {
    233.                   backgroundColor: '#81C784'
    234.                 }
    235.               },
    236.               AL: {
    237.                 group: 3,
    238.                 backgroundColor: '#C8E6C9',
    239.                 hoverState: {
    240.                   backgroundColor: '#81C784'
    241.                 }
    242.               },
    243.               KY: {
    244.                 group: 3,
    245.                 backgroundColor: '#C8E6C9',
    246.                 hoverState: {
    247.                   backgroundColor: '#81C784'
    248.                 }
    249.               },
    250.               MS: {
    251.                 group: 3,
    252.                 backgroundColor: '#C8E6C9',
    253.                 hoverState: {
    254.                   backgroundColor: '#81C784'
    255.                 }
    256.               },
    257.               TN: {
    258.                 group: 3,
    259.                 backgroundColor: '#C8E6C9',
    260.                 hoverState: {
    261.                   backgroundColor: '#81C784'
    262.                 }
    263.               },
    264.               AR: {
    265.                 group: 3,
    266.                 backgroundColor: '#C8E6C9',
    267.                 hoverState: {
    268.                   backgroundColor: '#81C784'
    269.                 }
    270.               },
    271.               LA: {
    272.                 group: 3,
    273.                 backgroundColor: '#C8E6C9',
    274.                 hoverState: {
    275.                   backgroundColor: '#81C784'
    276.                 }
    277.               },
    278.               OK: {
    279.                 group: 3,
    280.                 backgroundColor: '#C8E6C9',
    281.                 hoverState: {
    282.                   backgroundColor: '#81C784'
    283.                 }
    284.               },
    285.               TX: {
    286.                 group: 3,
    287.                 backgroundColor: '#C8E6C9',
    288.                 hoverState: {
    289.                   backgroundColor: '#81C784'
    290.                 }
    291.               },
    292.  
    293.               //West:
    294.               AZ: {
    295.                 group: 4,
    296.                 backgroundColor: '#BBDEFB',
    297.                 hoverState: {
    298.                   backgroundColor: '#64B5F6'
    299.                 }
    300.               },
    301.               CO: {
    302.                 group: 4,
    303.                 backgroundColor: '#BBDEFB',
    304.                 hoverState: {
    305.                   backgroundColor: '#64B5F6'
    306.                 }
    307.               },
    308.               ID: {
    309.                 group: 4,
    310.                 backgroundColor: '#BBDEFB',
    311.                 hoverState: {
    312.                   backgroundColor: '#64B5F6'
    313.                 }
    314.               },
    315.               MT: {
    316.                 group: 4,
    317.                 backgroundColor: '#BBDEFB',
    318.                 hoverState: {
    319.                   backgroundColor: '#64B5F6'
    320.                 }
    321.               },
    322.               NV: {
    323.                 group: 4,
    324.                 backgroundColor: '#BBDEFB',
    325.                 hoverState: {
    326.                   backgroundColor: '#64B5F6'
    327.                 }
    328.               },
    329.               NM: {
    330.                 group: 4,
    331.                 backgroundColor: '#BBDEFB',
    332.                 hoverState: {
    333.                   backgroundColor: '#64B5F6'
    334.                 }
    335.               },
    336.               UT: {
    337.                 group: 4,
    338.                 backgroundColor: '#BBDEFB',
    339.                 hoverState: {
    340.                   backgroundColor: '#64B5F6'
    341.                 }
    342.               },
    343.               WY: {
    344.                 group: 4,
    345.                 backgroundColor: '#BBDEFB',
    346.                 hoverState: {
    347.                   backgroundColor: '#64B5F6'
    348.                 }
    349.               },
    350.               AK: {
    351.                 group: 4,
    352.                 backgroundColor: '#BBDEFB',
    353.                 hoverState: {
    354.                   backgroundColor: '#64B5F6'
    355.                 }
    356.               },
    357.               CA: {
    358.                 group: 4,
    359.                 backgroundColor: '#BBDEFB',
    360.                 hoverState: {
    361.                   backgroundColor: '#64B5F6'
    362.                 }
    363.               },
    364.               HI: {
    365.                 group: 4,
    366.                 backgroundColor: '#BBDEFB',
    367.                 hoverState: {
    368.                   backgroundColor: '#64B5F6'
    369.                 }
    370.               },
    371.               OR: {
    372.                 group: 4,
    373.                 backgroundColor: '#BBDEFB',
    374.                 hoverState: {
    375.                   backgroundColor: '#64B5F6'
    376.                 }
    377.               },
    378.               WA: {
    379.                 group: 4,
    380.                 backgroundColor: '#BBDEFB',
    381.                 hoverState: {
    382.                   backgroundColor: '#64B5F6'
    383.                 }
    384.               }
    385.             },
    386.             tooltip: {
    387.               alpha: 0.5,
    388.               backgroundColor: 'white',
    389.               borderColor: 'white',
    390.               borderRadius: 3,
    391.               fontColor: 'black',
    392.               fontFamily: 'Georgia',
    393.               fontSize: 12,
    394.               textAlpha: 1
    395.             }
    396.           }
    397.         }
    398.       }]
    399.     },
    400.     height: 400,
    401.     width: '100%'
    402.   });
    403. });