Mixed Bar Dashboard

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/Q4JE2N3V

<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-body {
      background: #C0D4DD;
    }

    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 700px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>


<body class="zc-body">
  
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let bgColorMain = '#C0D4DD';
    let bgColor = '#D5E2E8';
    let aColors = ['#EC8B6A', '#03A0CD', '#648E9C', '#01495F'];

    let aBanks1 = [
      'Bank of China',
      'Santander',
      'ICBC',
      'Credit Agricole',
      'Mitubishi UFJ Financial',
      'Bank of America',
      'JPMorgan Chase',
      'Royal Bank of Scotland',
      'Citigroup',
      'HSBC',
    ];

    let aBanks2 = [
      'Agricultural Bank of China',
      'Bank of China',
      'Wells Fargo',
      'Mitubishi UFJ Financial',
      'Citigroup',
      'China Construction Bank',
      'HSBC',
      'Bank of America',
      'JPMorgan Chase',
      'ICBC',
    ];

    let g1a = {
      backgroundColor: bgColorMain,
      type: 'null',
      x: '2%',
      y: '0%',
      height: '100%',
      width: '100%',
      title: {
        text: 'Five years after Lehman',
        align: 'left',
        fontColor: '#000',
        fontSize: '16px',
        fontWeight: 'bold',
        paddingLeft: '0px',
      },
      source: {
        text: 'Sources: <i>The Banker</i>; Bloomberg; SNL Financial; company reports; national sources; <i>The Economist</i>',
        align: 'left',
        fontColor: '#000',
        fontSize: '10px',
        fontWeight: 'normal',
        padding: '2 0 0 0',
      },
    };

    let g1 = {
      id: 'gleft',
      backgroundColor: bgColor,
      height: '29%',
      width: '44%',
      x: '2%',
      y: '4%',
      type: 'hbar',
      title: {
        text: '<b>Top ten banks globally by Tier-1 capital,</b> $bn',
        align: 'left',
        fontColor: '#000',
        fontSize: '12px',
        fontWeight: 'normal',
        padding: '0 0 0 5',
      },
      subtitle: {
        text: 'End-2017',
        align: 'left',
        fontColor: '#000',
        fontSize: '11px',
        fontWeight: 'normal',
        offsetY: '-10px',
        padding: '0 0 0 5',
      },
      plot: {
        tooltip: {
          text: '%node-value $bn',
        },
        valueBox: {
          placement: 'bottom-in',
          fontSize: '10px',
          fontWeight: 'normal',
          color: '#FFF',
        },
        barsSpaceLeft: 0.05,
        barWidth: '90%',
        scales: 'scale-x,scale-y-2',
      },
      plotarea: {
        margin: '50 40 0 8',
      },
      scaleX: {
        lineWidth: '1px',
        lineColor: '#939298',
        item: {
          visible: false,
        },
        tick: {
          visible: false,
        },
        guide: {
          visible: false,
        },
      },
      scaleY2: {
        _minValue: 0,
        _maxValue: 100,
        step: 20,
        lineWidth: '0px',
        item: {
          fontSize: '11px',
          fontColor: '#000',
          fontWeight: 'normal',
          offsetY: '8px',
        },
        guide: {
          lineWidth: '2px',
          lineColor: '#fff',
        },
        tick: {
          visible: false,
        },
      },
      series: [{
          values: [110],
          backgroundColor: aColors[1],
          valueBox: {
            text: aBanks1[9],
          },
        },
        {
          values: [90],
          backgroundColor: aColors[3],
          valueBox: {
            text: aBanks1[8],
          },
        },
        {
          values: [90],
          backgroundColor: aColors[1],
          valueBox: [{
              text: aBanks1[7],
            },
            {
              text: '\u25BC',
              placement: 'top',
              offsetX: '-5px',
              fontSize: '20px',
              fontColor: aColors[1],
            },
          ],
        },
        {
          values: [90],
          backgroundColor: aColors[3],
          valueBox: {
            text: aBanks1[6],
          },
        },
        {
          values: [85],
          backgroundColor: aColors[3],
          valueBox: {
            text: aBanks1[5],
          },
        },
        {
          values: [85],
          backgroundColor: aColors[2],
          valueBox: {
            text: aBanks1[4],
          },
        },
        {
          values: [75],
          backgroundColor: aColors[1],
          valueBox: [{
              text: aBanks1[3],
            },
            {
              text: '\u25BC',
              fontColor: aColors[1],
              fontSize: '20px',
              offsetX: '-5px',
              placement: 'top',
            },
          ],
        },
        {
          values: [70],
          backgroundColor: aColors[0],
          valueBox: {
            text: aBanks1[2],
          },
        },
        {
          values: [60],
          backgroundColor: aColors[1],
          valueBox: [{
              text: aBanks1[1],
            },
            {
              text: '\u25BC',
              placement: 'top',
              offsetX: '-5px',
              fontSize: '20px',
              fontColor: aColors[1],
            },
          ],
        },
        {
          values: [55],
          backgroundColor: aColors[0],
          valueBox: {
            text: aBanks1[0],
          },
        },
      ],
    };

    let g2 = {
      id: 'gright',
      backgroundColor: bgColor,
      height: '29%',
      width: '52%',
      x: '46%',
      y: '4%',
      type: 'hbar',
      title: {
        text: '1',
        align: 'right',
        backgroundColor: '#648E9E',
        fontColor: '#fff',
        fontSize: '12px',
        fontWeight: 'normal',
        height: '20px',
        width: '20px',
      },
      subtitle: {
        text: 'End-2022',
        align: 'left',
        fontColor: '#000',
        fontSize: '11px',
        fontWeight: 'normal',
        offsetY: '-10px',
        padding: '0 0 0 25',
      },
      plot: {
        tooltip: {
          text: '%node-value $bn',
        },
        valueBox: {
          placement: 'bottom-in',
          fontSize: '10px',
          fontWeight: 'normal',
          color: '#FFF',
        },
        barWidth: '90%',
        scales: 'scale-x,scale-y-2',
      },
      plotarea: {
        margin: '50 10 0 30',
      },
      scaleX: {
        guide: {
          visible: false,
        },
        item: {
          visible: false,
        },
        lineColor: '#939298',
        lineWidth: '1px',
        tick: {
          visible: false,
        },
      },
      scaleY2: {
        step: 20,
        lineWidth: '0px',
        item: {
          fontColor: '#000',
          fontSize: '11px',
          fontWeight: 'normal',
          offsetY: '8px',
        },
        guide: {
          lineWidth: '2px',
          lineColor: '#fff',
        },
        tick: {
          visible: false,
        },
      },
      labels: [{
          align: 'left',
          backgroundColor: aColors[0],
          height: '10px',
          marginLeft: '25px',
          width: '25px',
          y: '3px',
        },
        {
          text: 'China',
          align: 'left',
          fontSize: '10px',
          x: '50px',
        },
        {
          align: 'left',
          backgroundColor: aColors[1],
          height: '10px',
          marginLeft: '25px',
          width: '25px',
          x: '100px',
          y: '3px',
        },
        {
          text: 'Europe',
          align: 'left',
          fontSize: '10px',
          x: '125px',
        },
        {
          align: 'left',
          backgroundColor: aColors[2],
          height: '10px',
          marginLeft: '25px',
          width: '25px',
          x: '175px',
          y: '3px',
        },
        {
          text: 'Japan',
          align: 'left',
          fontSize: '10px',
          x: '202px',
        },
        {
          align: 'left',
          backgroundColor: aColors[3],
          height: '10px',
          marginLeft: '25px',
          width: '25px',
          x: '250px',
          y: '3px',
        },
        {
          text: 'US',
          x: '275px',
          fontSize: '10px',
          align: 'left',
        },
      ],
      series: [{
          values: [160],
          backgroundColor: aColors[0],
          valueBox: {
            text: aBanks2[9],
          },
        },
        {
          values: [155],
          backgroundColor: aColors[3],
          valueBox: {
            text: aBanks2[8],
          },
        },
        {
          values: [152],
          backgroundColor: aColors[3],
          valueBox: {
            text: aBanks2[7],
          },
        },
        {
          values: [148],
          backgroundColor: aColors[1],
          valueBox: {
            text: aBanks2[6],
          },
        },
        {
          values: [140],
          backgroundColor: aColors[0],
          valueBox: [{
              text: aBanks2[5],
            },
            {
              text: '\u25B2',
              placement: 'bottom',
              offsetX: '5px',
              fontSize: '20px',
              fontColor: aColors[0],
            },
          ],
        },
        {
          values: [138],
          backgroundColor: aColors[3],
          valueBox: {
            text: aBanks2[4],
          },
        },
        {
          values: [130],
          backgroundColor: aColors[2],
          valueBox: {
            text: aBanks2[3],
          },
        },
        {
          values: [125],
          backgroundColor: aColors[3],
          valueBox: [{
              text: aBanks2[2],
            },
            {
              text: '\u25B2',
              placement: 'bottom',
              offsetX: '5px',
              fontSize: '20px',
              fontColor: aColors[3],
            },
          ],
        },
        {
          values: [120],
          backgroundColor: aColors[0],
          valueBox: {
            text: aBanks2[1],
          },
        },
        {
          values: [110],
          backgroundColor: aColors[0],
          valueBox: [{
              text: aBanks2[0],
            },
            {
              text: '\u25B2',
              fontColor: aColors[0],
              fontSize: '20px',
              offsetX: '5px',
              placement: 'bottom',
            },
          ],
        },
      ],
    };

    let g3 = {
      type: 'hbar',
      backgroundColor: bgColor,
      height: '12%',
      width: '96%',
      x: '2%',
      y: '35%',
      title: {
        text: '2',
        align: 'right',
        backgroundColor: '#648E9E',
        fontColor: '#fff',
        fontSize: '12px',
        fontWeight: 'normal',
        height: '20px',
        width: '20px',
      },
      subtitle: {
        text: '<b>Assets of the top five banks in each region,</b> $trn',
        align: 'left',
        fontColor: '#000',
        fontSize: '12px',
        fontWeight: 'normal',
        offsetY: '-25px',
        padding: '0 0 0 5',
      },
      plot: {
        tooltip: {
          text: '%node-value $trn',
        },
        valueBox: {
          placement: 'middle',
          fontSize: '10px',
          fontWeight: 'normal',
          color: '#FFF',
        },
        barWidth: '80%',
        stacked: true,
      },
      plotarea: {
        margin: '40 8 0 35',
      },
      scaleX: {
        labels: ['June<br>2023', '2018'],
        guide: {
          visible: false,
        },
        item: {
          fontColor: '#000',
          fontSize: '11px',
          fontWeight: 'normal',
        },
        lineWidth: '1px',
        lineColor: '#939298',
        tick: {
          visible: false,
        },
      },
      scaleY2: {
        minValue: 0,
        maxValue: 35,
        step: 5,
        lineWidth: '0px',
        item: {
          fontSize: '11px',
          fontColor: '#000',
          fontWeight: 'normal',
          offsetY: '5px',
        },
        guide: {
          lineWidth: '2px',
          lineColor: '#fff',
        },
        tick: {
          visible: false,
        },
      },
      series: [{
          values: [12, 15],
          backgroundColor: aColors[1],
          scales: 'scale-x,scale-y-2',
          valueBox: {
            text: 'Europe',
            type: 'last',
          },
        },
        {
          values: [10, 8],
          backgroundColor: aColors[3],
          scales: 'scale-x,scale-y-2',
          valueBox: {
            text: 'United States',
            type: 'last',
          },
        },
        {
          values: [12, 9],
          backgroundColor: aColors[2],
          scales: 'scale-x,scale-y-2',
          valueBox: {
            text: '<i>Rest of world</i>',
            type: 'last',
          },
        },
      ],
    };

    let g4 = {
      type: 'line',
      backgroundColor: bgColor,
      height: '23%',
      width: '45%',
      x: '2%',
      y: '49%',
      title: {
        text: '3',
        align: 'right',
        backgroundColor: '#648E9E',
        fontColor: '#fff',
        fontSize: '12px',
        fontWeight: 'normal',
        height: '20px',
        width: '20px',
      },
      subtitle: {
        text: '<b>Top ten banks average return on common equity,</b> %',
        fontSize: '12px',
        fontColor: '#000',
        fontWeight: 'normal',
        align: 'left',
        padding: '0 0 0 5',
        offsetY: '-25px',
      },
      plot: {
        tooltip: {
          text: '%node-value%',
        },
      },
      plotarea: {
        margin: '40 30 20 8',
      },
      scaleX: {
        values: ['2015', '16', '17', '18', '19', '20', '21', '22', '23'],
        guide: {
          visible: false,
        },
        item: {
          fontSize: '11px',
          fontColor: '#000',
          fontWeight: 'normal',
        },
        offset: '20px',
        lineWidth: '1px',
        lineColor: '#939298',
      },
      scaleY2: {
        minValue: 0,
        maxValue: 18,
        step: 2,
        maxItems: 999,
        itemsOverlap: true,
        lineWidth: '0px',
        item: {
          fontSize: '11px',
          fontColor: '#000',
          fontWeight: 'normal',
        },
        tick: {
          visible: false,
        },
        guide: {
          lineWidth: '2px',
          lineColor: '#fff',
        },
      },
      series: [{
        values: [17, 15, 12, 3, 5, 7, 9, 7, 9],
        scales: 'scale-x,scale-y-2',
        lineColor: aColors[3],
        lineWidth: '3px',
        marker: {
          size: 1,
          backgroundColor: aColors[3],
          borderColor: aColors[3],
        },
      }, ],
    };

    let g5 = {
      type: 'hbar',
      backgroundColor: bgColor,
      height: '23%',
      width: '49%',
      x: '49%',
      y: '49%',
      title: {
        text: '4',
        align: 'right',
        backgroundColor: '#648E9E',
        fontColor: '#fff',
        fontSize: '12px',
        fontWeight: 'normal',
        height: '20px',
        width: '20px',
      },
      subtitle: {
        text: '<b>Tier-1 capital</b><br><span style="font-size:11px">As % of risk-weighted assets</span>',
        align: 'left',
        fontColor: '#000',
        fontSize: '12px',
        fontWeight: 'normal',
        offsetY: '-25px',
        padding: '0 0 0 5',
      },
      legend: {
        backgroundColor: bgColor,
        borderWidth: '0px',
        height: '12%',
        item: {
          fontColor: '#000',
          fontSize: '10px',
          padding: '0 0 0 4',
        },
        layout: '2x',
        margin: '0 50 auto auto',
        marker: {
          type: 'rectangle',
          borderWidth: '0px',
          width: '24px',
          height: '10px',
        },
        padding: '0px',
      },
      plot: {
        tooltip: {
          text: '%node-value%',
        },
        scales: 'scale-x,scale-y-2',
      },
      plotarea: {
        margin: '50 10 10 50',
      },
      scaleX: {
        labels: [
          'Spain',
          'Italy',
          'United<br>States',
          'France',
          'Britain',
          'Germany',
        ],
        guide: {
          visible: false,
        },
        item: {
          fontSize: '10px',
          fontColor: '#000',
          fontWeight: 'normal',
          offsetX: '4px',
        },
        lineWidth: '1px',
        lineColor: '#939298',
        tick: {
          visible: false,
        },
      },
      scaleY2: {
        minValue: 0,
        maxValue: 14,
        step: 2,
        guide: {
          lineWidth: '2px',
          lineColor: '#fff',
        },
        item: {
          fontSize: '11px',
          fontColor: '#000',
          fontWeight: 'normal',
          offsetY: '6px',
        },
        lineWidth: '0px',
        tick: {
          visible: false,
        },
      },
      series: [{
          text: '2008',
          values: [8.8, 7.2, 10, 9.4, 8.3, 8.8],
          backgroundColor: aColors[1],
        },
        {
          text: '2012',
          values: [10, 11, 13, 13, 13, 13.9],
          backgroundColor: aColors[3],
        },
      ],
    };

    let g6 = {
      type: 'line',
      backgroundColor: bgColor,
      height: '23%',
      width: '45%',
      x: '2%',
      y: '74%',
      title: {
        text: '5',
        align: 'right',
        backgroundColor: '#648E9E',
        fontColor: '#fff',
        fontSize: '12px',
        fontWeight: 'normal',
        height: '20px',
        width: '20px',
      },
      subtitle: {
        text: '<b>Average compensatio ratio</b><br>Nine global investment banks, Q2, %',
        fontSize: '12px',
        fontColor: '#000',
        fontWeight: 'normal',
        align: 'left',
        padding: '0 0 0 5',
        offsetY: '-25px',
      },
      plot: {
        tooltip: {
          text: '%node-value%',
        },
      },
      plotarea: {
        margin: '50 30 20 8',
      },
      scaleX: {
        values: ['2017', '18', '19', '20', '21', '22', '23'],
        guide: {
          visible: false,
        },
        item: {
          fontSize: '11px',
          fontColor: '#000',
          fontWeight: 'normal',
        },
        lineColor: '#939298',
        lineWidth: '1px',
        offset: '20px',
      },
      scaleY2: {
        minValue: 36,
        maxValue: 54,
        step: 2,
        guide: {
          lineWidth: '2px',
          lineColor: '#fff',
        },
        item: {
          fontColor: '#000',
          fontSize: '11px',
          fontWeight: 'normal',
        },
        itemsOverlap: true,
        lineWidth: '0px',
        maxItems: 999,
        tick: {
          visible: false,
        },
      },
      series: [{
        values: [47.7, 53, 44, 42.8, 44.6, 43.9, 39.8],
        scales: 'scale-x,scale-y-2',
        lineColor: aColors[3],
        lineWidth: '3px',
        marker: {
          size: 1,
          backgroundColor: aColors[3],
          borderColor: aColors[3],
        },
      }, ],
    };

    let g7 = {
      type: 'mixed',
      backgroundColor: bgColor,
      height: '23%',
      width: '49%',
      x: '49%',
      y: '74%',
      title: {
        text: '6',
        align: 'right',
        backgroundColor: '#648E9E',
        fontColor: '#fff',
        fontSize: '12px',
        fontWeight: 'normal',
        height: '20px',
        width: '20px',
      },
      subtitle: {
        text: '<b>Financial-sector employees</b><br>',
        align: 'left',
        fontColor: '#000',
        fontSize: '12px',
        fontWeight: 'normal',
        offsetY: '-25px',
        padding: '0 0 0 5',
      },
      plot: {
        tooltip: {
          text: '%node-value',
        },
      },
      plotarea: {
        margin: '50 30 20 8',
      },
      scaleX: {
        values: ['Dec 2017', 'Mar 2023'],
        guide: {
          visible: false,
        },
        item: {
          fontSize: '11px',
          fontColor: '#000',
          fontWeight: 'normal',
        },
        lineWidth: '0px',
        markers: [{
            type: 'line',
            lineWidth: '2px',
            lineColor: '#000',
            range: [0],
          },
          {
            type: 'line',
            lineWidth: '2px',
            lineColor: '#000',
            range: [1],
          },
        ],
        maxValue: 5,
        offset: '45px',
        tick: {
          visible: false,
        },
      },
      scaleX2: {
        minValue: 0,
        maxValue: 2,
        step: 1,
        grid: {
          visible: false,
        },
        item: {
          visible: false,
        },
        lineWidth: '0px',
        tick: {
          visible: false,
        },
      },
      scaleY2: {
        minValue: 150,
        maxValue: 500,
        step: 50,
        guide: {
          lineWidth: '2px',
          lineColor: '#fff',
        },
        item: {
          fontSize: '11px',
          fontColor: '#000',
          fontWeight: 'normal',
        },
        itemsOverlap: true,
        lineWidth: '0px',
        maxItems: 999,
        tick: {
          visible: false,
        },
      },
      labels: [{
        text: '% of city total',
        backgroundColor: '#fff',
        borderColor: aColors[3],
        borderWidth: '1px',
        callout: true,
        fontColor: '#000',
        fontSize: '10px',
        hook: 'node:plot=2,index=1',
        offsetX: '12px',
        offsetY: '-50px',
        padding: '3px',
      }, ],
      series: [{
          type: 'line',
          values: [180, 215],
          lineColor: aColors[0],
          lineWidth: '3px',
          scales: 'scale-x,scale-y-2',
          valueBox: [{
              type: 'first',
              text: '7.3 ',
              align: 'center',
              backgroundColor: '#fff',
              borderColor: aColors[3],
              borderWidth: '1px',
              fontColor: '#000',
              fontSize: '10px',
              fontWeight: 'normal',
              offsetX: '-25px',
              padding: '2px',
              placement: 'out',
              shadow: 0,
              width: '30px',
            },
            {
              type: 'last',
              text: '7.7 ',
              align: 'center',
              backgroundColor: '#fff',
              borderColor: aColors[3],
              borderWidth: '1px',
              fontColor: '#000',
              fontSize: '10px',
              fontWeight: 'normal',
              offsetX: '25px',
              padding: '2px',
              placement: 'out',
              shadow: 0,
              width: '30px',
            },
          ],
          marker: {
            backgroundColor: '#fff',
            borderColor: aColors[0],
            borderWidth: '2px',
            size: 5,
          },
        },
        {
          type: 'line',
          values: [360, 370],
          lineColor: aColors[1],
          lineWidth: 3,
          scales: 'scale-x,scale-y-2',
          valueBox: [{
              type: 'first',
              text: '7.4 ',
              align: 'center',
              backgroundColor: '#fff',
              borderColor: aColors[3],
              borderWidth: '1px',
              fontColor: '#000',
              fontSize: '10px',
              fontWeight: 'normal',
              offsetX: '-25px',
              padding: '2px',
              placement: 'out',
              shadow: 0,
              width: '30px',
            },
            {
              type: 'last',
              text: '7.2 ',
              align: 'center',
              backgroundColor: '#fff',
              borderColor: aColors[3],
              borderWidth: '1px',
              fontColor: '#000',
              fontSize: '10px',
              fontWeight: 'normal',
              offsetX: '25px',
              padding: '2px',
              placement: 'out',
              shadow: 0,
              width: '30px',
            },
          ],
          marker: {
            size: 5,
            backgroundColor: '#fff',
            borderColor: aColors[1],
            borderWidth: '2px',
          },
        },
        {
          type: 'line',
          values: [480, 440],
          lineColor: aColors[3],
          lineWidth: '3px',
          scales: 'scale-x,scale-y-2',
          valueBox: [{
              type: 'first',
              text: '12.3 ',
              width: '30px',
              borderWidth: '1px',
              borderColor: aColors[3],
              backgroundColor: '#fff',
              shadow: 0,
              fontSize: '10px',
              fontColor: '#000',
              fontWeight: 'normal',
              align: 'center',
              padding: '2px',
              placement: 'out',
              offsetX: '-25px',
            },
            {
              type: 'last',
              text: '11.1 ',
              align: 'center',
              backgroundColor: '#fff',
              borderColor: aColors[3],
              borderWidth: '1px',
              fontColor: '#000',
              fontSize: '10px',
              fontWeight: 'normal',
              offsetX: '25px',
              padding: '2px',
              placement: 'out',
              shadow: 0,
              width: '30px',
            },
          ],
          marker: {
            size: 5,
            backgroundColor: '#fff',
            borderColor: aColors[3],
            borderWidth: '2px',
          },
        },
        {
          type: 'scatter',
          scales: 'scale-x-2,scale-y-2',
          values: [1, 460],
          marker: {
            size: 0,
            borderWidth: '0px',
            backgroundColor: aColors[3],
          },
          valueBox: {
            text: 'New York City',
            fontColor: '#000',
            fontSize: '11px',
            fontWeight: 'normal',
          },
          tooltip: {
            visible: false,
          },
        },
        {
          type: 'scatter',
          scales: 'scale-x-2,scale-y-2',
          values: [1, 365],
          marker: {
            size: 0,
            borderWidth: '0px',
            backgroundColor: aColors[1],
          },
          valueBox: {
            text: 'London',
            fontColor: '#000',
            fontSize: '11px',
            fontWeight: 'normal',
          },
          tooltip: {
            visible: false,
          },
        },
        {
          type: 'scatter',
          scales: 'scale-x-2,scale-y-2',
          values: [1, 199],
          marker: {
            size: 1,
            borderWidth: '0px',
            backgroundColor: aColors[0],
          },
          valueBox: {
            text: 'Hong Kong',
            fontColor: '#000',
            fontSize: '11px',
            fontWeight: 'normal',
          },
          tooltip: {
            visible: false,
          },
        },
      ],
    };

    let chartJSON = {
      backgroundColor: bgColorMain,

      graphset: [g1a, g1, g2, g3, g4, g5, g6, g7],
    };

    let aLinks = [
      [0, 3, aColors[1]],
      [1, 5, aColors[3]],
      [3, 1, aColors[3]],
      [4, 2, aColors[3]],
      [5, 6, aColors[2]],
      [7, 0, aColors[0]],
      [9, 8, aColors[0]],
    ];

    zingchart.bind('zc', 'load', function(p) {
      let aShapes = [];

      for (let i = 0; i < aLinks.length; i++) {
        let aPoints = [];

        let oInfo1 = zingchart.exec(p.id, 'getobjectinfo', {
          object: 'node',
          graphid: 'gleft',
          plotindex: aLinks[i][0],
          nodeindex: 0,
        });

        let oInfo2 = zingchart.exec(p.id, 'getobjectinfo', {
          object: 'node',
          graphid: 'gright',
          plotindex: aLinks[i][1],
          nodeindex: 0,
        });

        aPoints.push([oInfo1.bounds[2], (oInfo1.bounds[1] + oInfo1.bounds[3]) / 2]);
        aPoints.push([
          oInfo2.bounds[0] - 55,
          (oInfo1.bounds[1] + oInfo1.bounds[3]) / 2,
        ]);
        aPoints.push([
          oInfo2.bounds[0] - 15,
          (oInfo2.bounds[1] + oInfo2.bounds[3]) / 2,
        ]);
        aPoints.push([oInfo2.bounds[0], (oInfo2.bounds[1] + oInfo2.bounds[3]) / 2]);

        aShapes.push({
          type: 'line',
          lineWidth: 2,
          lineColor: aLinks[i][2],
          points: aPoints,
        });
      }

      zingchart.exec(p.id, 'addobject', {
        type: 'shape',
        data: aShapes,
      });
    });

    zingchart.render({
      id: 'myChart',
      width: '100%',
      height: '100%',
      data: chartJSON,
    });
  </script>
</body>

</html>

<!doctype html>
<html class="zc-html">
  <head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  
  <body class="zc-body">
  
    <div id="myChart" class="chart--container">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>
    
  </body>
</html>

let bgColorMain = '#C0D4DD';
let bgColor = '#D5E2E8';
let aColors = ['#EC8B6A', '#03A0CD', '#648E9C', '#01495F'];

let aBanks1 = [
  'Bank of China',
  'Santander',
  'ICBC',
  'Credit Agricole',
  'Mitubishi UFJ Financial',
  'Bank of America',
  'JPMorgan Chase',
  'Royal Bank of Scotland',
  'Citigroup',
  'HSBC',
];

let aBanks2 = [
  'Agricultural Bank of China',
  'Bank of China',
  'Wells Fargo',
  'Mitubishi UFJ Financial',
  'Citigroup',
  'China Construction Bank',
  'HSBC',
  'Bank of America',
  'JPMorgan Chase',
  'ICBC',
];

let g1a = {
  backgroundColor: bgColorMain,
  type: 'null',
  x: '2%',
  y: '0%',
  height: '100%',
  width: '100%',
  title: {
    text: 'Five years after Lehman',
    align: 'left',
    fontColor: '#000',
    fontSize: '16px',
    fontWeight: 'bold',
    paddingLeft: '0px',
  },
  source: {
    text: 'Sources: <i>The Banker</i>; Bloomberg; SNL Financial; company reports; national sources; <i>The Economist</i>',
    align: 'left',
    fontColor: '#000',
    fontSize: '10px',
    fontWeight: 'normal',
    padding: '2 0 0 0',
  },
};

let g1 = {
  id: 'gleft',
  backgroundColor: bgColor,
  height: '29%',
  width: '44%',
  x: '2%',
  y: '4%',
  type: 'hbar',
  title: {
    text: '<b>Top ten banks globally by Tier-1 capital,</b> $bn',
    align: 'left',
    fontColor: '#000',
    fontSize: '12px',
    fontWeight: 'normal',
    padding: '0 0 0 5',
  },
  subtitle: {
    text: 'End-2017',
    align: 'left',
    fontColor: '#000',
    fontSize: '11px',
    fontWeight: 'normal',
    offsetY: '-10px',
    padding: '0 0 0 5',
  },
  plot: {
    tooltip: {
      text: '%node-value $bn',
    },
    valueBox: {
      placement: 'bottom-in',
      fontSize: '10px',
      fontWeight: 'normal',
      color: '#FFF',
    },
    barsSpaceLeft: 0.05,
    barWidth: '90%',
    scales: 'scale-x,scale-y-2',
  },
  plotarea: {
    margin: '50 40 0 8',
  },
  scaleX: {
    lineWidth: '1px',
    lineColor: '#939298',
    item: {
      visible: false,
    },
    tick: {
      visible: false,
    },
    guide: {
      visible: false,
    },
  },
  scaleY2: {
    _minValue: 0,
    _maxValue: 100,
    step: 20,
    lineWidth: '0px',
    item: {
      fontSize: '11px',
      fontColor: '#000',
      fontWeight: 'normal',
      offsetY: '8px',
    },
    guide: {
      lineWidth: '2px',
      lineColor: '#fff',
    },
    tick: {
      visible: false,
    },
  },
  series: [
    {
      values: [110],
      backgroundColor: aColors[1],
      valueBox: {
        text: aBanks1[9],
      },
    },
    {
      values: [90],
      backgroundColor: aColors[3],
      valueBox: {
        text: aBanks1[8],
      },
    },
    {
      values: [90],
      backgroundColor: aColors[1],
      valueBox: [
        {
          text: aBanks1[7],
        },
        {
          text: '\u25BC',
          placement: 'top',
          offsetX: '-5px',
          fontSize: '20px',
          fontColor: aColors[1],
        },
      ],
    },
    {
      values: [90],
      backgroundColor: aColors[3],
      valueBox: {
        text: aBanks1[6],
      },
    },
    {
      values: [85],
      backgroundColor: aColors[3],
      valueBox: {
        text: aBanks1[5],
      },
    },
    {
      values: [85],
      backgroundColor: aColors[2],
      valueBox: {
        text: aBanks1[4],
      },
    },
    {
      values: [75],
      backgroundColor: aColors[1],
      valueBox: [
        {
          text: aBanks1[3],
        },
        {
          text: '\u25BC',
          fontColor: aColors[1],
          fontSize: '20px',
          offsetX: '-5px',
          placement: 'top',
        },
      ],
    },
    {
      values: [70],
      backgroundColor: aColors[0],
      valueBox: {
        text: aBanks1[2],
      },
    },
    {
      values: [60],
      backgroundColor: aColors[1],
      valueBox: [
        {
          text: aBanks1[1],
        },
        {
          text: '\u25BC',
          placement: 'top',
          offsetX: '-5px',
          fontSize: '20px',
          fontColor: aColors[1],
        },
      ],
    },
    {
      values: [55],
      backgroundColor: aColors[0],
      valueBox: {
        text: aBanks1[0],
      },
    },
  ],
};

let g2 = {
  id: 'gright',
  backgroundColor: bgColor,
  height: '29%',
  width: '52%',
  x: '46%',
  y: '4%',
  type: 'hbar',
  title: {
    text: '1',
    align: 'right',
    backgroundColor: '#648E9E',
    fontColor: '#fff',
    fontSize: '12px',
    fontWeight: 'normal',
    height: '20px',
    width: '20px',
  },
  subtitle: {
    text: 'End-2022',
    align: 'left',
    fontColor: '#000',
    fontSize: '11px',
    fontWeight: 'normal',
    offsetY: '-10px',
    padding: '0 0 0 25',
  },
  plot: {
    tooltip: {
      text: '%node-value $bn',
    },
    valueBox: {
      placement: 'bottom-in',
      fontSize: '10px',
      fontWeight: 'normal',
      color: '#FFF',
    },
    barWidth: '90%',
    scales: 'scale-x,scale-y-2',
  },
  plotarea: {
    margin: '50 10 0 30',
  },
  scaleX: {
    guide: {
      visible: false,
    },
    item: {
      visible: false,
    },
    lineColor: '#939298',
    lineWidth: '1px',
    tick: {
      visible: false,
    },
  },
  scaleY2: {
    step: 20,
    lineWidth: '0px',
    item: {
      fontColor: '#000',
      fontSize: '11px',
      fontWeight: 'normal',
      offsetY: '8px',
    },
    guide: {
      lineWidth: '2px',
      lineColor: '#fff',
    },
    tick: {
      visible: false,
    },
  },
  labels: [
    {
      align: 'left',
      backgroundColor: aColors[0],
      height: '10px',
      marginLeft: '25px',
      width: '25px',
      y: '3px',
    },
    {
      text: 'China',
      align: 'left',
      fontSize: '10px',
      x: '50px',
    },
    {
      align: 'left',
      backgroundColor: aColors[1],
      height: '10px',
      marginLeft: '25px',
      width: '25px',
      x: '100px',
      y: '3px',
    },
    {
      text: 'Europe',
      align: 'left',
      fontSize: '10px',
      x: '125px',
    },
    {
      align: 'left',
      backgroundColor: aColors[2],
      height: '10px',
      marginLeft: '25px',
      width: '25px',
      x: '175px',
      y: '3px',
    },
    {
      text: 'Japan',
      align: 'left',
      fontSize: '10px',
      x: '202px',
    },
    {
      align: 'left',
      backgroundColor: aColors[3],
      height: '10px',
      marginLeft: '25px',
      width: '25px',
      x: '250px',
      y: '3px',
    },
    {
      text: 'US',
      x: '275px',
      fontSize: '10px',
      align: 'left',
    },
  ],
  series: [
    {
      values: [160],
      backgroundColor: aColors[0],
      valueBox: {
        text: aBanks2[9],
      },
    },
    {
      values: [155],
      backgroundColor: aColors[3],
      valueBox: {
        text: aBanks2[8],
      },
    },
    {
      values: [152],
      backgroundColor: aColors[3],
      valueBox: {
        text: aBanks2[7],
      },
    },
    {
      values: [148],
      backgroundColor: aColors[1],
      valueBox: {
        text: aBanks2[6],
      },
    },
    {
      values: [140],
      backgroundColor: aColors[0],
      valueBox: [
        {
          text: aBanks2[5],
        },
        {
          text: '\u25B2',
          placement: 'bottom',
          offsetX: '5px',
          fontSize: '20px',
          fontColor: aColors[0],
        },
      ],
    },
    {
      values: [138],
      backgroundColor: aColors[3],
      valueBox: {
        text: aBanks2[4],
      },
    },
    {
      values: [130],
      backgroundColor: aColors[2],
      valueBox: {
        text: aBanks2[3],
      },
    },
    {
      values: [125],
      backgroundColor: aColors[3],
      valueBox: [
        {
          text: aBanks2[2],
        },
        {
          text: '\u25B2',
          placement: 'bottom',
          offsetX: '5px',
          fontSize: '20px',
          fontColor: aColors[3],
        },
      ],
    },
    {
      values: [120],
      backgroundColor: aColors[0],
      valueBox: {
        text: aBanks2[1],
      },
    },
    {
      values: [110],
      backgroundColor: aColors[0],
      valueBox: [
        {
          text: aBanks2[0],
        },
        {
          text: '\u25B2',
          fontColor: aColors[0],
          fontSize: '20px',
          offsetX: '5px',
          placement: 'bottom',
        },
      ],
    },
  ],
};

let g3 = {
  type: 'hbar',
  backgroundColor: bgColor,
  height: '12%',
  width: '96%',
  x: '2%',
  y: '35%',
  title: {
    text: '2',
    align: 'right',
    backgroundColor: '#648E9E',
    fontColor: '#fff',
    fontSize: '12px',
    fontWeight: 'normal',
    height: '20px',
    width: '20px',
  },
  subtitle: {
    text: '<b>Assets of the top five banks in each region,</b> $trn',
    align: 'left',
    fontColor: '#000',
    fontSize: '12px',
    fontWeight: 'normal',
    offsetY: '-25px',
    padding: '0 0 0 5',
  },
  plot: {
    tooltip: {
      text: '%node-value $trn',
    },
    valueBox: {
      placement: 'middle',
      fontSize: '10px',
      fontWeight: 'normal',
      color: '#FFF',
    },
    barWidth: '80%',
    stacked: true,
  },
  plotarea: {
    margin: '40 8 0 35',
  },
  scaleX: {
    labels: ['June<br>2023', '2018'],
    guide: {
      visible: false,
    },
    item: {
      fontColor: '#000',
      fontSize: '11px',
      fontWeight: 'normal',
    },
    lineWidth: '1px',
    lineColor: '#939298',
    tick: {
      visible: false,
    },
  },
  scaleY2: {
    minValue: 0,
    maxValue: 35,
    step: 5,
    lineWidth: '0px',
    item: {
      fontSize: '11px',
      fontColor: '#000',
      fontWeight: 'normal',
      offsetY: '5px',
    },
    guide: {
      lineWidth: '2px',
      lineColor: '#fff',
    },
    tick: {
      visible: false,
    },
  },
  series: [
    {
      values: [12, 15],
      backgroundColor: aColors[1],
      scales: 'scale-x,scale-y-2',
      valueBox: {
        text: 'Europe',
        type: 'last',
      },
    },
    {
      values: [10, 8],
      backgroundColor: aColors[3],
      scales: 'scale-x,scale-y-2',
      valueBox: {
        text: 'United States',
        type: 'last',
      },
    },
    {
      values: [12, 9],
      backgroundColor: aColors[2],
      scales: 'scale-x,scale-y-2',
      valueBox: {
        text: '<i>Rest of world</i>',
        type: 'last',
      },
    },
  ],
};

let g4 = {
  type: 'line',
  backgroundColor: bgColor,
  height: '23%',
  width: '45%',
  x: '2%',
  y: '49%',
  title: {
    text: '3',
    align: 'right',
    backgroundColor: '#648E9E',
    fontColor: '#fff',
    fontSize: '12px',
    fontWeight: 'normal',
    height: '20px',
    width: '20px',
  },
  subtitle: {
    text: '<b>Top ten banks average return on common equity,</b> %',
    fontSize: '12px',
    fontColor: '#000',
    fontWeight: 'normal',
    align: 'left',
    padding: '0 0 0 5',
    offsetY: '-25px',
  },
  plot: {
    tooltip: {
      text: '%node-value%',
    },
  },
  plotarea: {
    margin: '40 30 20 8',
  },
  scaleX: {
    values: ['2015', '16', '17', '18', '19', '20', '21', '22', '23'],
    guide: {
      visible: false,
    },
    item: {
      fontSize: '11px',
      fontColor: '#000',
      fontWeight: 'normal',
    },
    offset: '20px',
    lineWidth: '1px',
    lineColor: '#939298',
  },
  scaleY2: {
    minValue: 0,
    maxValue: 18,
    step: 2,
    maxItems: 999,
    itemsOverlap: true,
    lineWidth: '0px',
    item: {
      fontSize: '11px',
      fontColor: '#000',
      fontWeight: 'normal',
    },
    tick: {
      visible: false,
    },
    guide: {
      lineWidth: '2px',
      lineColor: '#fff',
    },
  },
  series: [
    {
      values: [17, 15, 12, 3, 5, 7, 9, 7, 9],
      scales: 'scale-x,scale-y-2',
      lineColor: aColors[3],
      lineWidth: '3px',
      marker: {
        size: 1,
        backgroundColor: aColors[3],
        borderColor: aColors[3],
      },
    },
  ],
};

let g5 = {
  type: 'hbar',
  backgroundColor: bgColor,
  height: '23%',
  width: '49%',
  x: '49%',
  y: '49%',
  title: {
    text: '4',
    align: 'right',
    backgroundColor: '#648E9E',
    fontColor: '#fff',
    fontSize: '12px',
    fontWeight: 'normal',
    height: '20px',
    width: '20px',
  },
  subtitle: {
    text: '<b>Tier-1 capital</b><br><span style="font-size:11px">As % of risk-weighted assets</span>',
    align: 'left',
    fontColor: '#000',
    fontSize: '12px',
    fontWeight: 'normal',
    offsetY: '-25px',
    padding: '0 0 0 5',
  },
  legend: {
    backgroundColor: bgColor,
    borderWidth: '0px',
    height: '12%',
    item: {
      fontColor: '#000',
      fontSize: '10px',
      padding: '0 0 0 4',
    },
    layout: '2x',
    margin: '0 50 auto auto',
    marker: {
      type: 'rectangle',
      borderWidth: '0px',
      width: '24px',
      height: '10px',
    },
    padding: '0px',
  },
  plot: {
    tooltip: {
      text: '%node-value%',
    },
    scales: 'scale-x,scale-y-2',
  },
  plotarea: {
    margin: '50 10 10 50',
  },
  scaleX: {
    labels: [
      'Spain',
      'Italy',
      'United<br>States',
      'France',
      'Britain',
      'Germany',
    ],
    guide: {
      visible: false,
    },
    item: {
      fontSize: '10px',
      fontColor: '#000',
      fontWeight: 'normal',
      offsetX: '4px',
    },
    lineWidth: '1px',
    lineColor: '#939298',
    tick: {
      visible: false,
    },
  },
  scaleY2: {
    minValue: 0,
    maxValue: 14,
    step: 2,
    guide: {
      lineWidth: '2px',
      lineColor: '#fff',
    },
    item: {
      fontSize: '11px',
      fontColor: '#000',
      fontWeight: 'normal',
      offsetY: '6px',
    },
    lineWidth: '0px',
    tick: {
      visible: false,
    },
  },
  series: [
    {
      text: '2008',
      values: [8.8, 7.2, 10, 9.4, 8.3, 8.8],
      backgroundColor: aColors[1],
    },
    {
      text: '2012',
      values: [10, 11, 13, 13, 13, 13.9],
      backgroundColor: aColors[3],
    },
  ],
};

let g6 = {
  type: 'line',
  backgroundColor: bgColor,
  height: '23%',
  width: '45%',
  x: '2%',
  y: '74%',
  title: {
    text: '5',
    align: 'right',
    backgroundColor: '#648E9E',
    fontColor: '#fff',
    fontSize: '12px',
    fontWeight: 'normal',
    height: '20px',
    width: '20px',
  },
  subtitle: {
    text: '<b>Average compensatio ratio</b><br>Nine global investment banks, Q2, %',
    fontSize: '12px',
    fontColor: '#000',
    fontWeight: 'normal',
    align: 'left',
    padding: '0 0 0 5',
    offsetY: '-25px',
  },
  plot: {
    tooltip: {
      text: '%node-value%',
    },
  },
  plotarea: {
    margin: '50 30 20 8',
  },
  scaleX: {
    values: ['2017', '18', '19', '20', '21', '22', '23'],
    guide: {
      visible: false,
    },
    item: {
      fontSize: '11px',
      fontColor: '#000',
      fontWeight: 'normal',
    },
    lineColor: '#939298',
    lineWidth: '1px',
    offset: '20px',
  },
  scaleY2: {
    minValue: 36,
    maxValue: 54,
    step: 2,
    guide: {
      lineWidth: '2px',
      lineColor: '#fff',
    },
    item: {
      fontColor: '#000',
      fontSize: '11px',
      fontWeight: 'normal',
    },
    itemsOverlap: true,
    lineWidth: '0px',
    maxItems: 999,
    tick: {
      visible: false,
    },
  },
  series: [
    {
      values: [47.7, 53, 44, 42.8, 44.6, 43.9, 39.8],
      scales: 'scale-x,scale-y-2',
      lineColor: aColors[3],
      lineWidth: '3px',
      marker: {
        size: 1,
        backgroundColor: aColors[3],
        borderColor: aColors[3],
      },
    },
  ],
};

let g7 = {
  type: 'mixed',
  backgroundColor: bgColor,
  height: '23%',
  width: '49%',
  x: '49%',
  y: '74%',
  title: {
    text: '6',
    align: 'right',
    backgroundColor: '#648E9E',
    fontColor: '#fff',
    fontSize: '12px',
    fontWeight: 'normal',
    height: '20px',
    width: '20px',
  },
  subtitle: {
    text: '<b>Financial-sector employees</b><br>',
    align: 'left',
    fontColor: '#000',
    fontSize: '12px',
    fontWeight: 'normal',
    offsetY: '-25px',
    padding: '0 0 0 5',
  },
  plot: {
    tooltip: {
      text: '%node-value',
    },
  },
  plotarea: {
    margin: '50 30 20 8',
  },
  scaleX: {
    values: ['Dec 2017', 'Mar 2023'],
    guide: {
      visible: false,
    },
    item: {
      fontSize: '11px',
      fontColor: '#000',
      fontWeight: 'normal',
    },
    lineWidth: '0px',
    markers: [
      {
        type: 'line',
        lineWidth: '2px',
        lineColor: '#000',
        range: [0],
      },
      {
        type: 'line',
        lineWidth: '2px',
        lineColor: '#000',
        range: [1],
      },
    ],
    maxValue: 5,
    offset: '45px',
    tick: {
      visible: false,
    },
  },
  scaleX2: {
    minValue: 0,
    maxValue: 2,
    step: 1,
    grid: {
      visible: false,
    },
    item: {
      visible: false,
    },
    lineWidth: '0px',
    tick: {
      visible: false,
    },
  },
  scaleY2: {
    minValue: 150,
    maxValue: 500,
    step: 50,
    guide: {
      lineWidth: '2px',
      lineColor: '#fff',
    },
    item: {
      fontSize: '11px',
      fontColor: '#000',
      fontWeight: 'normal',
    },
    itemsOverlap: true,
    lineWidth: '0px',
    maxItems: 999,
    tick: {
      visible: false,
    },
  },
  labels: [
    {
      text: '% of city total',
      backgroundColor: '#fff',
      borderColor: aColors[3],
      borderWidth: '1px',
      callout: true,
      fontColor: '#000',
      fontSize: '10px',
      hook: 'node:plot=2,index=1',
      offsetX: '12px',
      offsetY: '-50px',
      padding: '3px',
    },
  ],
  series: [
    {
      type: 'line',
      values: [180, 215],
      lineColor: aColors[0],
      lineWidth: '3px',
      scales: 'scale-x,scale-y-2',
      valueBox: [
        {
          type: 'first',
          text: '7.3 ',
          align: 'center',
          backgroundColor: '#fff',
          borderColor: aColors[3],
          borderWidth: '1px',
          fontColor: '#000',
          fontSize: '10px',
          fontWeight: 'normal',
          offsetX: '-25px',
          padding: '2px',
          placement: 'out',
          shadow: 0,
          width: '30px',
        },
        {
          type: 'last',
          text: '7.7 ',
          align: 'center',
          backgroundColor: '#fff',
          borderColor: aColors[3],
          borderWidth: '1px',
          fontColor: '#000',
          fontSize: '10px',
          fontWeight: 'normal',
          offsetX: '25px',
          padding: '2px',
          placement: 'out',
          shadow: 0,
          width: '30px',
        },
      ],
      marker: {
        backgroundColor: '#fff',
        borderColor: aColors[0],
        borderWidth: '2px',
        size: 5,
      },
    },
    {
      type: 'line',
      values: [360, 370],
      lineColor: aColors[1],
      lineWidth: 3,
      scales: 'scale-x,scale-y-2',
      valueBox: [
        {
          type: 'first',
          text: '7.4 ',
          align: 'center',
          backgroundColor: '#fff',
          borderColor: aColors[3],
          borderWidth: '1px',
          fontColor: '#000',
          fontSize: '10px',
          fontWeight: 'normal',
          offsetX: '-25px',
          padding: '2px',
          placement: 'out',
          shadow: 0,
          width: '30px',
        },
        {
          type: 'last',
          text: '7.2 ',
          align: 'center',
          backgroundColor: '#fff',
          borderColor: aColors[3],
          borderWidth: '1px',
          fontColor: '#000',
          fontSize: '10px',
          fontWeight: 'normal',
          offsetX: '25px',
          padding: '2px',
          placement: 'out',
          shadow: 0,
          width: '30px',
        },
      ],
      marker: {
        size: 5,
        backgroundColor: '#fff',
        borderColor: aColors[1],
        borderWidth: '2px',
      },
    },
    {
      type: 'line',
      values: [480, 440],
      lineColor: aColors[3],
      lineWidth: '3px',
      scales: 'scale-x,scale-y-2',
      valueBox: [
        {
          type: 'first',
          text: '12.3 ',
          width: '30px',
          borderWidth: '1px',
          borderColor: aColors[3],
          backgroundColor: '#fff',
          shadow: 0,
          fontSize: '10px',
          fontColor: '#000',
          fontWeight: 'normal',
          align: 'center',
          padding: '2px',
          placement: 'out',
          offsetX: '-25px',
        },
        {
          type: 'last',
          text: '11.1 ',
          align: 'center',
          backgroundColor: '#fff',
          borderColor: aColors[3],
          borderWidth: '1px',
          fontColor: '#000',
          fontSize: '10px',
          fontWeight: 'normal',
          offsetX: '25px',
          padding: '2px',
          placement: 'out',
          shadow: 0,
          width: '30px',
        },
      ],
      marker: {
        size: 5,
        backgroundColor: '#fff',
        borderColor: aColors[3],
        borderWidth: '2px',
      },
    },
    {
      type: 'scatter',
      scales: 'scale-x-2,scale-y-2',
      values: [1, 460],
      marker: {
        size: 0,
        borderWidth: '0px',
        backgroundColor: aColors[3],
      },
      valueBox: {
        text: 'New York City',
        fontColor: '#000',
        fontSize: '11px',
        fontWeight: 'normal',
      },
      tooltip: {
        visible: false,
      },
    },
    {
      type: 'scatter',
      scales: 'scale-x-2,scale-y-2',
      values: [1, 365],
      marker: {
        size: 0,
        borderWidth: '0px',
        backgroundColor: aColors[1],
      },
      valueBox: {
        text: 'London',
        fontColor: '#000',
        fontSize: '11px',
        fontWeight: 'normal',
      },
      tooltip: {
        visible: false,
      },
    },
    {
      type: 'scatter',
      scales: 'scale-x-2,scale-y-2',
      values: [1, 199],
      marker: {
        size: 1,
        borderWidth: '0px',
        backgroundColor: aColors[0],
      },
      valueBox: {
        text: 'Hong Kong',
        fontColor: '#000',
        fontSize: '11px',
        fontWeight: 'normal',
      },
      tooltip: {
        visible: false,
      },
    },
  ],
};

let chartJSON = {
  backgroundColor: bgColorMain,

  graphset: [g1a, g1, g2, g3, g4, g5, g6, g7],
};

let aLinks = [
  [0, 3, aColors[1]],
  [1, 5, aColors[3]],
  [3, 1, aColors[3]],
  [4, 2, aColors[3]],
  [5, 6, aColors[2]],
  [7, 0, aColors[0]],
  [9, 8, aColors[0]],
];

zingchart.bind('zc', 'load', function (p) {
  let aShapes = [];

  for (let i = 0; i < aLinks.length; i++) {
    let aPoints = [];

    let oInfo1 = zingchart.exec(p.id, 'getobjectinfo', {
      object: 'node',
      graphid: 'gleft',
      plotindex: aLinks[i][0],
      nodeindex: 0,
    });

    let oInfo2 = zingchart.exec(p.id, 'getobjectinfo', {
      object: 'node',
      graphid: 'gright',
      plotindex: aLinks[i][1],
      nodeindex: 0,
    });

    aPoints.push([oInfo1.bounds[2], (oInfo1.bounds[1] + oInfo1.bounds[3]) / 2]);
    aPoints.push([
      oInfo2.bounds[0] - 55,
      (oInfo1.bounds[1] + oInfo1.bounds[3]) / 2,
    ]);
    aPoints.push([
      oInfo2.bounds[0] - 15,
      (oInfo2.bounds[1] + oInfo2.bounds[3]) / 2,
    ]);
    aPoints.push([oInfo2.bounds[0], (oInfo2.bounds[1] + oInfo2.bounds[3]) / 2]);

    aShapes.push({
      type: 'line',
      lineWidth: 2,
      lineColor: aLinks[i][2],
      points: aPoints,
    });
  }

  zingchart.exec(p.id, 'addobject', {
    type: 'shape',
    data: aShapes,
  });
});

zingchart.render({
  id: 'myChart',
  width: '100%',
  height: '100%',
  data: chartJSON,
});

.zc-body { background:#C0D4DD; }

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 700px;
}

.zc-ref {
  display: none;
}

Global Innovation Tile Map 72/275 Mixed Bar and Pie Chart Dashboard

Mixed Bar Dashboard

Related Documentation: