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