• Edit
  • Download
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .zc-body {
    10.       background: #f9f9f9;
    11.     }
    12.  
    13.     .chart--container {
    14.       height: 100%;
    15.       width: 100%;
    16.       min-height: 950px;
    17.     }
    18.  
    19.     .zc-ref {
    20.       display: none;
    21.     }
    22.   </style>
    23. </head>
    24. ​
    25.  
    26. <body class="zc-body">
    27.   <div id="myChart" class="chart--container">
    28.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    29.   </div>
    30.   <script>
    31.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // full ZingChart schema can be found here: 
    32.     // https: //www.zingchart.com/docs/api/json-configuration/
    33.     let chartData = [{
    34.         id: 'execdir',
    35.         name: 'EXECUTIVE<br>DIRECTOR',
    36.         parent: '',
    37.         cls: 'bblack'
    38.       },
    39.  
    40.       {
    41.         id: 'fkn1l',
    42.         fake: true,
    43.         parent: 'execdir',
    44.         sibling: 'fkn1',
    45.         name: '1L'
    46.       },
    47.       {
    48.         id: 'fkn1',
    49.         fake: true,
    50.         name: '1',
    51.         parent: 'execdir'
    52.       },
    53.       {
    54.         id: 'deputydir',
    55.         name: 'DEPUTY<br>DIRECTOR',
    56.         parent: 'execdir',
    57.         sibling: 'fkn1',
    58.         cls: 'bblack'
    59.       },
    60.  
    61.       {
    62.         id: 'asstdir',
    63.         name: 'ASST to the<br>EXECUTIVE DIRECTOR',
    64.         parent: 'fkn1',
    65.         sibling: 'fkn3',
    66.         cls: 'bblack'
    67.       },
    68.       {
    69.         id: 'fkn3',
    70.         fake: true,
    71.         name: '3',
    72.         parent: 'fkn1'
    73.       },
    74.       {
    75.         id: 'itmanag',
    76.         name: 'IT Manager',
    77.         parent: 'fkn1',
    78.         cls: 'bblack',
    79.         sibling: 'fkn3'
    80.       },
    81.  
    82.       // orange
    83.       {
    84.         id: 'dirtran',
    85.         name: 'Director<br>Transportation<br>& Planning<br>Services',
    86.         parent: 'fkn3',
    87.         cls: 'borange'
    88.       },
    89.  
    90.       {
    91.         id: 'adminasst',
    92.         name: 'Administrative<br>Assistant',
    93.         parent: 'dirtran',
    94.         sibling: 'fkn4',
    95.         cls: 'borange'
    96.       },
    97.       {
    98.         id: 'fkn4',
    99.         fake: true,
    100.         name: '4',
    101.         parent: 'dirtran'
    102.       },
    103.       {
    104.         id: 'fkn4d',
    105.         fake: true,
    106.         name: '4D',
    107.         parent: 'dirtran',
    108.         sibling: 'fkn4'
    109.       },
    110.  
    111.       {
    112.         id: 'progcoo1',
    113.         name: 'Program<br>Coordinator',
    114.         parent: 'fkn4',
    115.         cls: 'borange'
    116.       },
    117.       {
    118.         id: 'transplan',
    119.         name: 'Trans-<br>portation<br>Planner',
    120.         parent: 'progcoo1',
    121.         cls: 'borange'
    122.       },
    123.       {
    124.         id: 'gistech',
    125.         name: 'GIS<br>Technician',
    126.         parent: 'progcoo1',
    127.         reference: 'transplan',
    128.         cls: 'borange'
    129.       },
    130.  
    131.       {
    132.         id: 'progcoo2',
    133.         name: 'Program<br>Coordinator',
    134.         parent: 'fkn4',
    135.         cls: 'borange'
    136.       },
    137.       {
    138.         id: 'transplan2',
    139.         name: 'Trans-<br>portation<br>Planner',
    140.         parent: 'progcoo2',
    141.         cls: 'borange'
    142.       },
    143.       {
    144.         id: 'intern',
    145.         name: 'Intern',
    146.         parent: 'progcoo2',
    147.         reference: 'transplan2',
    148.         cls: 'borange'
    149.       },
    150.  
    151.       {
    152.         id: 'progcoo3',
    153.         name: 'Program<br>Coordinator',
    154.         parent: 'fkn4',
    155.         cls: 'borange'
    156.       },
    157.       {
    158.         id: 'transplan3',
    159.         name: 'Trans-<br>portation<br>Planner',
    160.         parent: 'progcoo3',
    161.         cls: 'borange'
    162.       },
    163.       {
    164.         id: 'transplan4',
    165.         name: 'Trans-<br>portation<br>Planner',
    166.         parent: 'progcoo3',
    167.         reference: 'transplan3',
    168.         cls: 'borange'
    169.       },
    170.  
    171.       // blue
    172.       {
    173.         id: 'dirfin',
    174.         name: 'Director,<br>Finance',
    175.         parent: 'fkn3',
    176.         cls: 'blightblue'
    177.       },
    178.  
    179.       {
    180.         id: 'accasst',
    181.         name: 'Accounting<br>Administrative<br>Assistant',
    182.         parent: 'dirfin',
    183.         sibling: 'fkn6',
    184.         cls: 'blightblue'
    185.       },
    186.       {
    187.         id: 'fkn6',
    188.         fake: true,
    189.         name: '6',
    190.         parent: 'dirfin'
    191.       },
    192.       {
    193.         id: 'fkn6d',
    194.         fake: true,
    195.         name: '6D',
    196.         parent: 'dirfin',
    197.         sibling: 'fkn6'
    198.       },
    199.  
    200.       {
    201.         id: 'chacc',
    202.         name: 'Chief<br>Accountant',
    203.         parent: 'fkn6',
    204.         cls: 'blightblue'
    205.       },
    206.       {
    207.         id: 'payacc',
    208.         name: 'Payroll<br>Accountant',
    209.         parent: 'fkn6',
    210.         reference: 'chacc',
    211.         cls: 'blightblue'
    212.       },
    213.  
    214.       // red
    215.       {
    216.         id: 'dir911',
    217.         name: 'Director,<br>9-1-1 &<br>Public Safety',
    218.         parent: 'fkn3',
    219.         cls: 'bred'
    220.       },
    221.  
    222.       {
    223.         id: 'adminasst2',
    224.         name: 'Administrative<br>Assistant',
    225.         parent: 'dir911',
    226.         sibling: 'fkn5',
    227.         cls: 'bred'
    228.       },
    229.       {
    230.         id: 'fkn5',
    231.         fake: true,
    232.         name: '5',
    233.         parent: 'dir911'
    234.       },
    235.       {
    236.         id: 'fkn5d',
    237.         fake: true,
    238.         name: '5D',
    239.         parent: 'dir911',
    240.         sibling: 'fkn5'
    241.       },
    242.  
    243.       {
    244.         id: '911sm',
    245.         name: '9-1-1<br>Support<br>Manager',
    246.         parent: 'fkn5',
    247.         cls: 'bred'
    248.       },
    249.       {
    250.         id: '911ss',
    251.         name: '9-1-1<br>System<br>Specialist',
    252.         parent: '911sm',
    253.         cls: 'bred rshifted'
    254.       },
    255.       {
    256.         id: '911acs',
    257.         name: '9-1-1 ACOG<br>System<br>Specialist I',
    258.         parent: '911sm',
    259.         reference: '911ss',
    260.         cls: 'bred rshifted'
    261.       },
    262.  
    263.       {
    264.         id: '911ipm',
    265.         name: '9-1-1<br>Institute<br>Programs<br>Manager',
    266.         parent: 'fkn5',
    267.         cls: 'bred'
    268.       },
    269.  
    270.       {
    271.         id: '911gism',
    272.         name: '9-1-1 GIS<br>Manager',
    273.         parent: 'fkn5',
    274.         cls: 'bred'
    275.       },
    276.       {
    277.         id: '911giss',
    278.         name: '9-1-1 GIS<br>Specialist',
    279.         parent: '911gism',
    280.         cls: 'bred rshifted'
    281.       },
    282.       {
    283.         id: '911gist',
    284.         name: '9-1-1 GIS<br>Technician',
    285.         parent: '911gism',
    286.         reference: '911giss',
    287.         cls: 'bred rshifted'
    288.       },
    289.  
    290.       {
    291.         id: 'facman',
    292.         name: 'Facilities<br>Management',
    293.         parent: 'fkn5',
    294.         cls: 'bred'
    295.       },
    296.  
    297.       // dark blue
    298.       {
    299.         id: 'dirwat',
    300.         name: 'Director,Water<br>Resources',
    301.         parent: 'fkn3',
    302.         cls: 'bblue'
    303.       },
    304.  
    305.       {
    306.         id: 'adminasst3',
    307.         name: 'Administrative<br>Assistant',
    308.         parent: 'dirwat',
    309.         sibling: 'fkn7',
    310.         cls: 'bblue'
    311.       },
    312.       {
    313.         id: 'fkn7',
    314.         fake: true,
    315.         name: '7',
    316.         parent: 'dirwat'
    317.       },
    318.       {
    319.         id: 'fkn7d',
    320.         fake: true,
    321.         name: '7D',
    322.         parent: 'dirwat',
    323.         sibling: 'fkn7'
    324.       },
    325.       {
    326.         id: 'cip',
    327.         name: 'CIP',
    328.         parent: 'fkn7',
    329.         cls: 'bblue'
    330.       },
    331.  
    332.       // green
    333.       {
    334.         id: 'dirpr',
    335.         name: 'Director, PR<br>and Comm.<br>Development',
    336.         parent: 'fkn3',
    337.         cls: 'bgreen'
    338.       },
    339.       {
    340.         id: 'cdbg',
    341.         name: 'CDBG,REAP',
    342.         parent: 'dirpr',
    343.         cls: 'bgreen rshifted'
    344.       },
    345.       {
    346.         id: 'clci',
    347.         name: 'CLEAN CITIES',
    348.         parent: 'dirpr',
    349.         reference: 'cdbg',
    350.         cls: 'bgreen rshifted'
    351.       },
    352.       {
    353.         id: 'edd',
    354.         name: 'EDD',
    355.         parent: 'dirpr',
    356.         reference: 'cdbg',
    357.         cls: 'bgreen rshifted'
    358.       },
    359.       {
    360.         id: 'grde',
    361.         name: 'GRAPHIC<br>DESIGN',
    362.         parent: 'dirpr',
    363.         reference: 'cdbg',
    364.         cls: 'bgreen rshifted'
    365.       }
    366.     ];
    367.  
    368.     let chartConfig = {
    369.       type: 'tree',
    370.       backgroundColor: '#f9f9f9',
    371.       options: {
    372.         aspect: 'tree-down',
    373.         orgChart: true,
    374.         packingFactor: 1,
    375.         link: {
    376.           lineColor: '#000'
    377.         },
    378.         'link[parent-911sm]': {
    379.           aspect: 'side-before'
    380.         },
    381.         'link[parent-911gism]': {
    382.           aspect: 'side-before'
    383.         },
    384.         'link[parent-dirpr]': {
    385.           aspect: 'side-before'
    386.         },
    387.         node: {
    388.           height: '65px',
    389.           borderColor: '#333333',
    390.           borderWidth: '1px',
    391.           shadow: true,
    392.           shadowAlpha: 0.5,
    393.           shadowDistance: '2px',
    394.           label: {
    395.             color: '#fff',
    396.             fontSize: '10px'
    397.           },
    398.           hoverState: {
    399.             visible: false
    400.           },
    401.           tooltip: {
    402.             text: '<b>%text</b><br>%data-title'
    403.           }
    404.         },
    405.         'node[cls-rshifted]': {
    406.           offsetX: '25px'
    407.         },
    408.         'node[cls-lshifted]': {
    409.           offsetX: '-25px'
    410.         },
    411.         'node[cls-bblack]': {
    412.           backgroundColor: '#000',
    413.           width: '120px'
    414.         },
    415.         'node[cls-borange]': {
    416.           backgroundColor: '#F6931D',
    417.           width: '80px'
    418.         },
    419.         'node[cls-bred]': {
    420.           backgroundColor: '#C00000',
    421.           width: '80px'
    422.         },
    423.         'node[cls-blightblue]': {
    424.           backgroundColor: '#00B9C2',
    425.           width: '80px'
    426.         },
    427.         'node[cls-bblue]': {
    428.           backgroundColor: '#00408F',
    429.           width: '80px'
    430.         },
    431.         'node[cls-bgreen]': {
    432.           backgroundColor: '#70AD47',
    433.           width: '80px'
    434.         }
    435.       },
    436.       plotarea: {
    437.         margin: '20px 20x 20x 0'
    438.       },
    439.       series: chartData
    440.     };
    441.  
    442.     zingchart.render({
    443.       id: 'myChart',
    444.       width: '100%',
    445.       height: '100%',
    446.       data: chartConfig
    447.     });
    448.   </script>
    449. </body>
    450.  
    451. </html>
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9. ​
    10.  
    11. <body class="zc-body">
    12.   <div id="myChart" class="chart--container">
    13.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    14.   </div>
    15. </body>
    16.  
    17. </html>
    1. .zc-body {
    2.   background: #f9f9f9;
    3. }
    4.  
    5. .chart--container {
    6.   height: 100%;
    7.   width: 100%;
    8.   min-height: 950px;
    9. }
    10.  
    11. .zc-ref {
    12.   display: none;
    13. }
    1. // full ZingChart schema can be found here: 
    2. // https: //www.zingchart.com/docs/api/json-configuration/
    3. let chartData = [{
    4.     id: 'execdir',
    5.     name: 'EXECUTIVE<br>DIRECTOR',
    6.     parent: '',
    7.     cls: 'bblack'
    8.   },
    9.  
    10.   {
    11.     id: 'fkn1l',
    12.     fake: true,
    13.     parent: 'execdir',
    14.     sibling: 'fkn1',
    15.     name: '1L'
    16.   },
    17.   {
    18.     id: 'fkn1',
    19.     fake: true,
    20.     name: '1',
    21.     parent: 'execdir'
    22.   },
    23.   {
    24.     id: 'deputydir',
    25.     name: 'DEPUTY<br>DIRECTOR',
    26.     parent: 'execdir',
    27.     sibling: 'fkn1',
    28.     cls: 'bblack'
    29.   },
    30.  
    31.   {
    32.     id: 'asstdir',
    33.     name: 'ASST to the<br>EXECUTIVE DIRECTOR',
    34.     parent: 'fkn1',
    35.     sibling: 'fkn3',
    36.     cls: 'bblack'
    37.   },
    38.   {
    39.     id: 'fkn3',
    40.     fake: true,
    41.     name: '3',
    42.     parent: 'fkn1'
    43.   },
    44.   {
    45.     id: 'itmanag',
    46.     name: 'IT Manager',
    47.     parent: 'fkn1',
    48.     cls: 'bblack',
    49.     sibling: 'fkn3'
    50.   },
    51.  
    52.   // orange
    53.   {
    54.     id: 'dirtran',
    55.     name: 'Director<br>Transportation<br>& Planning<br>Services',
    56.     parent: 'fkn3',
    57.     cls: 'borange'
    58.   },
    59.  
    60.   {
    61.     id: 'adminasst',
    62.     name: 'Administrative<br>Assistant',
    63.     parent: 'dirtran',
    64.     sibling: 'fkn4',
    65.     cls: 'borange'
    66.   },
    67.   {
    68.     id: 'fkn4',
    69.     fake: true,
    70.     name: '4',
    71.     parent: 'dirtran'
    72.   },
    73.   {
    74.     id: 'fkn4d',
    75.     fake: true,
    76.     name: '4D',
    77.     parent: 'dirtran',
    78.     sibling: 'fkn4'
    79.   },
    80.  
    81.   {
    82.     id: 'progcoo1',
    83.     name: 'Program<br>Coordinator',
    84.     parent: 'fkn4',
    85.     cls: 'borange'
    86.   },
    87.   {
    88.     id: 'transplan',
    89.     name: 'Trans-<br>portation<br>Planner',
    90.     parent: 'progcoo1',
    91.     cls: 'borange'
    92.   },
    93.   {
    94.     id: 'gistech',
    95.     name: 'GIS<br>Technician',
    96.     parent: 'progcoo1',
    97.     reference: 'transplan',
    98.     cls: 'borange'
    99.   },
    100.  
    101.   {
    102.     id: 'progcoo2',
    103.     name: 'Program<br>Coordinator',
    104.     parent: 'fkn4',
    105.     cls: 'borange'
    106.   },
    107.   {
    108.     id: 'transplan2',
    109.     name: 'Trans-<br>portation<br>Planner',
    110.     parent: 'progcoo2',
    111.     cls: 'borange'
    112.   },
    113.   {
    114.     id: 'intern',
    115.     name: 'Intern',
    116.     parent: 'progcoo2',
    117.     reference: 'transplan2',
    118.     cls: 'borange'
    119.   },
    120.  
    121.   {
    122.     id: 'progcoo3',
    123.     name: 'Program<br>Coordinator',
    124.     parent: 'fkn4',
    125.     cls: 'borange'
    126.   },
    127.   {
    128.     id: 'transplan3',
    129.     name: 'Trans-<br>portation<br>Planner',
    130.     parent: 'progcoo3',
    131.     cls: 'borange'
    132.   },
    133.   {
    134.     id: 'transplan4',
    135.     name: 'Trans-<br>portation<br>Planner',
    136.     parent: 'progcoo3',
    137.     reference: 'transplan3',
    138.     cls: 'borange'
    139.   },
    140.  
    141.   // blue
    142.   {
    143.     id: 'dirfin',
    144.     name: 'Director,<br>Finance',
    145.     parent: 'fkn3',
    146.     cls: 'blightblue'
    147.   },
    148.  
    149.   {
    150.     id: 'accasst',
    151.     name: 'Accounting<br>Administrative<br>Assistant',
    152.     parent: 'dirfin',
    153.     sibling: 'fkn6',
    154.     cls: 'blightblue'
    155.   },
    156.   {
    157.     id: 'fkn6',
    158.     fake: true,
    159.     name: '6',
    160.     parent: 'dirfin'
    161.   },
    162.   {
    163.     id: 'fkn6d',
    164.     fake: true,
    165.     name: '6D',
    166.     parent: 'dirfin',
    167.     sibling: 'fkn6'
    168.   },
    169.  
    170.   {
    171.     id: 'chacc',
    172.     name: 'Chief<br>Accountant',
    173.     parent: 'fkn6',
    174.     cls: 'blightblue'
    175.   },
    176.   {
    177.     id: 'payacc',
    178.     name: 'Payroll<br>Accountant',
    179.     parent: 'fkn6',
    180.     reference: 'chacc',
    181.     cls: 'blightblue'
    182.   },
    183.  
    184.   // red
    185.   {
    186.     id: 'dir911',
    187.     name: 'Director,<br>9-1-1 &<br>Public Safety',
    188.     parent: 'fkn3',
    189.     cls: 'bred'
    190.   },
    191.  
    192.   {
    193.     id: 'adminasst2',
    194.     name: 'Administrative<br>Assistant',
    195.     parent: 'dir911',
    196.     sibling: 'fkn5',
    197.     cls: 'bred'
    198.   },
    199.   {
    200.     id: 'fkn5',
    201.     fake: true,
    202.     name: '5',
    203.     parent: 'dir911'
    204.   },
    205.   {
    206.     id: 'fkn5d',
    207.     fake: true,
    208.     name: '5D',
    209.     parent: 'dir911',
    210.     sibling: 'fkn5'
    211.   },
    212.  
    213.   {
    214.     id: '911sm',
    215.     name: '9-1-1<br>Support<br>Manager',
    216.     parent: 'fkn5',
    217.     cls: 'bred'
    218.   },
    219.   {
    220.     id: '911ss',
    221.     name: '9-1-1<br>System<br>Specialist',
    222.     parent: '911sm',
    223.     cls: 'bred rshifted'
    224.   },
    225.   {
    226.     id: '911acs',
    227.     name: '9-1-1 ACOG<br>System<br>Specialist I',
    228.     parent: '911sm',
    229.     reference: '911ss',
    230.     cls: 'bred rshifted'
    231.   },
    232.  
    233.   {
    234.     id: '911ipm',
    235.     name: '9-1-1<br>Institute<br>Programs<br>Manager',
    236.     parent: 'fkn5',
    237.     cls: 'bred'
    238.   },
    239.  
    240.   {
    241.     id: '911gism',
    242.     name: '9-1-1 GIS<br>Manager',
    243.     parent: 'fkn5',
    244.     cls: 'bred'
    245.   },
    246.   {
    247.     id: '911giss',
    248.     name: '9-1-1 GIS<br>Specialist',
    249.     parent: '911gism',
    250.     cls: 'bred rshifted'
    251.   },
    252.   {
    253.     id: '911gist',
    254.     name: '9-1-1 GIS<br>Technician',
    255.     parent: '911gism',
    256.     reference: '911giss',
    257.     cls: 'bred rshifted'
    258.   },
    259.  
    260.   {
    261.     id: 'facman',
    262.     name: 'Facilities<br>Management',
    263.     parent: 'fkn5',
    264.     cls: 'bred'
    265.   },
    266.  
    267.   // dark blue
    268.   {
    269.     id: 'dirwat',
    270.     name: 'Director,Water<br>Resources',
    271.     parent: 'fkn3',
    272.     cls: 'bblue'
    273.   },
    274.  
    275.   {
    276.     id: 'adminasst3',
    277.     name: 'Administrative<br>Assistant',
    278.     parent: 'dirwat',
    279.     sibling: 'fkn7',
    280.     cls: 'bblue'
    281.   },
    282.   {
    283.     id: 'fkn7',
    284.     fake: true,
    285.     name: '7',
    286.     parent: 'dirwat'
    287.   },
    288.   {
    289.     id: 'fkn7d',
    290.     fake: true,
    291.     name: '7D',
    292.     parent: 'dirwat',
    293.     sibling: 'fkn7'
    294.   },
    295.   {
    296.     id: 'cip',
    297.     name: 'CIP',
    298.     parent: 'fkn7',
    299.     cls: 'bblue'
    300.   },
    301.  
    302.   // green
    303.   {
    304.     id: 'dirpr',
    305.     name: 'Director, PR<br>and Comm.<br>Development',
    306.     parent: 'fkn3',
    307.     cls: 'bgreen'
    308.   },
    309.   {
    310.     id: 'cdbg',
    311.     name: 'CDBG,REAP',
    312.     parent: 'dirpr',
    313.     cls: 'bgreen rshifted'
    314.   },
    315.   {
    316.     id: 'clci',
    317.     name: 'CLEAN CITIES',
    318.     parent: 'dirpr',
    319.     reference: 'cdbg',
    320.     cls: 'bgreen rshifted'
    321.   },
    322.   {
    323.     id: 'edd',
    324.     name: 'EDD',
    325.     parent: 'dirpr',
    326.     reference: 'cdbg',
    327.     cls: 'bgreen rshifted'
    328.   },
    329.   {
    330.     id: 'grde',
    331.     name: 'GRAPHIC<br>DESIGN',
    332.     parent: 'dirpr',
    333.     reference: 'cdbg',
    334.     cls: 'bgreen rshifted'
    335.   }
    336. ];
    337.  
    338. let chartConfig = {
    339.   type: 'tree',
    340.   backgroundColor: '#f9f9f9',
    341.   options: {
    342.     aspect: 'tree-down',
    343.     orgChart: true,
    344.     packingFactor: 1,
    345.     link: {
    346.       lineColor: '#000'
    347.     },
    348.     'link[parent-911sm]': {
    349.       aspect: 'side-before'
    350.     },
    351.     'link[parent-911gism]': {
    352.       aspect: 'side-before'
    353.     },
    354.     'link[parent-dirpr]': {
    355.       aspect: 'side-before'
    356.     },
    357.     node: {
    358.       height: '65px',
    359.       borderColor: '#333333',
    360.       borderWidth: '1px',
    361.       shadow: true,
    362.       shadowAlpha: 0.5,
    363.       shadowDistance: '2px',
    364.       label: {
    365.         color: '#fff',
    366.         fontSize: '10px'
    367.       },
    368.       hoverState: {
    369.         visible: false
    370.       },
    371.       tooltip: {
    372.         text: '<b>%text</b><br>%data-title'
    373.       }
    374.     },
    375.     'node[cls-rshifted]': {
    376.       offsetX: '25px'
    377.     },
    378.     'node[cls-lshifted]': {
    379.       offsetX: '-25px'
    380.     },
    381.     'node[cls-bblack]': {
    382.       backgroundColor: '#000',
    383.       width: '120px'
    384.     },
    385.     'node[cls-borange]': {
    386.       backgroundColor: '#F6931D',
    387.       width: '80px'
    388.     },
    389.     'node[cls-bred]': {
    390.       backgroundColor: '#C00000',
    391.       width: '80px'
    392.     },
    393.     'node[cls-blightblue]': {
    394.       backgroundColor: '#00B9C2',
    395.       width: '80px'
    396.     },
    397.     'node[cls-bblue]': {
    398.       backgroundColor: '#00408F',
    399.       width: '80px'
    400.     },
    401.     'node[cls-bgreen]': {
    402.       backgroundColor: '#70AD47',
    403.       width: '80px'
    404.     }
    405.   },
    406.   plotarea: {
    407.     margin: '20px 20x 20x 0'
    408.   },
    409.   series: chartData
    410. };
    411.  
    412. zingchart.render({
    413.   id: 'myChart',
    414.   width: '100%',
    415.   height: '100%',
    416.   data: chartConfig
    417. });