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