Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>
	<head>
		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
		<script>
      zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    </script>
    <script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous">
    </script>
  </head>
	<body>
    
    <script>
      window.setTimeout(function() {
        $(document.body).append('<iframe style="border:0px;position:absolute;top:0px;right:0px;width:270px;height:480px;" src="https://codepen.io/zingchart/full/ef639d5ca7dd69ae067720228a01d542"></iframe>');
      }, 2500);
    </script>
    
		<div id="zc"></div>
	
  </body>
</html>


              
            
!

CSS

              
                body { 
  margin:10px;
  padding:10px; 
}

*, input, button, select, textarea, label {
  font-family: 'Lucida Sans Unicode',Monaco,Tahoma,Verdana,Arial;
}
              
            
!

JS

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

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

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

var g1a = {
	backgroundColor : bgColorMain,
	type : 'null',

	x : '2%',
	y : '0%',
	height : '100%',
	width : '100%',	

	title : {
		text : 'Five years after Lehman',
		fontSize : 16,
		fontColor : '#000',
		fontWeight : 'bold',
		align : 'left',
		paddingLeft : 0
	},

	source : {
		text : 'Sources: <i>The Banker</i>; Bloomberg; SNL Financial; company reports; national sources; <i>The Economist</i>',
		fontSize : 10,
		fontColor : '#000',
		fontWeight : 'normal',
		align : 'left',
		padding : '2 0 0 0'
	}
};

var g1 = {
	id : 'gleft',
	backgroundColor : bgColor,

	height : '29%',
	width : '44%',
	x : '2%',
	y : '4%',

	type : 'hbar',
	
	plotarea : {
		margin : '50 40 0 8'
	},

	title : {
		text : '<b>Top ten banks globally by Tier-1 capital,</b> $bn',
		fontSize : 12,
		fontColor : '#000',
		fontWeight : 'normal',
		align : 'left',
		padding : '0 0 0 5'
	},

	subtitle : {
		text : 'End-2007',
		fontSize : 11,
		fontColor : '#000',
		fontWeight : 'normal',
		align : 'left',
		padding : '0 0 0 5',
		offsetY : -10
	},

	tooltip : {
		text : '%node-value $bn'
	},

	plot : {
		barsSpaceLeft : 0.05,
		barWidth : '90%',
		scales : 'scale-x,scale-y-2',
		valueBox : {
			placement : 'bottom-in',
			fontSize : 10,
			fontWeight : 'normal',
			color : '#FFF'
		}
	},

	scaleX : {
		lineWidth : 1,
		lineColor : '#939298',
		item : {
			visible : false
		},
		tick : {
			visible : false
		},
		guide : {
			visible : false
		}

	},

	scaleY2 : {
		_minValue : 0,
		_maxValue : 100,
		step : 20,
		lineWidth : 0,
		item : {
			fontSize : 11,
			fontColor : '#000',
			fontWeight : 'normal',
			offsetY : 8
		},
		guide : {
			lineWidth : 2,
			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]
				},
				{
					placement : 'top',
					offsetX : -5,
					text : '\u25BC',
					fontSize : 20,
					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]
				},
				{
					placement : 'top',
					offsetX : -5,
					text : '\u25BC',
					fontSize : 20,
					fontColor : aColors[1]
				}
			]
		},
		{
			values : [70],
			backgroundColor : aColors[0],
			valueBox : {
				text : aBanks1[2]
			}
		},
		{
			values : [60],
			backgroundColor : aColors[1],
			valueBox : [
				{
					text : aBanks1[1]
				},
				{
					placement : 'top',
					offsetX : -5,
					text : '\u25BC',
					fontSize : 20,
					fontColor : aColors[1]
				}
			]
		},
		{
			values : [55],
			backgroundColor : aColors[0],
			valueBox : {
				text : aBanks1[0]
			}
		}
	]
};

var g2 = {
	id : 'gright',
	backgroundColor : bgColor,

	height : '29%',
	width : '52%',
	x : '46%',
	y : '4%',

	type : 'hbar',
	
	plotarea : {
		margin : '50 10 0 30'
	},

	title : {
		text : '1',
		backgroundColor : '#648E9E',
		width : '20px',
		height : '20px',
		fontSize : 12,
		fontColor : '#fff',
		fontWeight : 'normal',
		align : 'right'
	},

	subtitle : {
		text : 'End-2012',
		fontSize : 11,
		fontColor : '#000',
		fontWeight : 'normal',
		align : 'left',
		padding : '0 0 0 25',
		offsetY : -10
	},

	labels : [
		{
			y : 3,
			width : 25,
			height : 10,
			align : 'left',
			marginLeft : 25,
			backgroundColor : aColors[0]
		},
		{
			x : 50,
			text : 'China',
			fontSize : 10,
			align : 'left',
		},
		{
			y : 3,
			x : 100,
			width : 25,
			height : 10,
			align : 'left',
			marginLeft : 25,
			backgroundColor : aColors[1]
		},
		{
			x : 125,
			text : 'Europe',
			fontSize : 10,
			align : 'left'
		},
		{
			y : 3,
			x : 175,
			width : 25,
			height : 10,
			align : 'left',
			marginLeft : 25,
			backgroundColor : aColors[2]
		},
		{
			x : 202,
			text : 'Japan',
			fontSize : 10,
			align : 'left'
		},		
		{
			y : 3,
			x : 250,
			width : 25,
			height : 10,
			align : 'left',
			marginLeft : 25,
			backgroundColor : aColors[3]
		},
		{
			x : 275,
			text : 'US',
			fontSize : 10,
			align : 'left'
		}
	],

	tooltip : {
		text : '%node-value $bn'
	},

	plot : {
		barWidth : '90%',
		scales : 'scale-x,scale-y-2',
		valueBox : {
			placement : 'bottom-in',
			fontSize : 10,
			fontWeight : 'normal',
			color : '#FFF'
		}
	},

	scaleX : {
		lineWidth : 1,
		lineColor : '#939298',
		item : {
			visible : false
		},
		tick : {
			visible : false
		},
		guide : {
			visible : false
		}

	},

	scaleY2 : {
		_minValue : 0,
		_maxValue : 150,
		step : 20,
		lineWidth : 0,
		item : {
			fontSize : 11,
			fontColor : '#000',
			fontWeight : 'normal',
			offsetY : 8
		},
		guide : {
			lineWidth : 2,
			lineColor : '#fff'
		},
		tick : {
			visible : false
		}
	},

	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]
				},
				{
					placement : 'bottom',
					offsetX : 5,
					text : '\u25B2',
					fontSize : 20,
					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]
				},
				{
					placement : 'bottom',
					offsetX : 5,
					text : '\u25B2',
					fontSize : 20,
					fontColor : aColors[3]
				}
			]
		},
		{
			values : [120],
			backgroundColor : aColors[0],
			valueBox : {
				text : aBanks2[1]
			}
		},
		{
			values : [110],
			backgroundColor : aColors[0],
			valueBox : [
				{
					text : aBanks2[0]
				},
				{
					placement : 'bottom',
					offsetX : 5,
					text : '\u25B2',
					fontSize : 20,
					fontColor : aColors[0]
				}
			]
		}
	]
};

var g3 = {
	backgroundColor : bgColor,

	height : '12%',
	width : '96%',
	x : '2%',
	y : '35%',

	type : 'hbar',
	
	plotarea : {
		margin : '40 8 0 35'
	},

	title : {
		text : '2',
		backgroundColor : '#648E9E',
		width : '20px',
		height : '20px',
		fontSize : 12,
		fontColor : '#fff',
		fontWeight : 'normal',
		align : 'right'
	},

	subtitle : {
		text : '<b>Assets of the top five banks in each region,</b> $trn',
		fontSize : 12,
		fontColor : '#000',
		fontWeight : 'normal',
		align : 'left',
		padding : '0 0 0 5',
		offsetY : -25
	},

	tooltip : {
		text : '%node-value $trn'
	},

	plot: {
		barWidth : '80%',
		stacked : true,
		valueBox : {
			placement : 'middle',
			fontSize : 10,
			fontWeight : 'normal',
			color : '#FFF'
		}
	},

	scaleX : {
		labels : ['June<br>2013', '2008'],
		lineWidth : 1,
		lineColor : '#939298',
		item : {
			fontSize : 11,
			fontColor : '#000',
			fontWeight : 'normal'
		},
		tick : {
			visible : false
		},
		guide : {
			visible : false
		}
	},

	scaleY2 : {
		minValue : 0,
		maxValue : 35,
		step : 5,
		lineWidth : 0,
		item : {
			fontSize : 11,
			fontColor : '#000',
			fontWeight : 'normal',
			offsetY : 5
		},
		guide : {
			lineWidth : 2,
			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'
			}
		}
	]
};

var g4 = {
	backgroundColor : bgColor,

	height : '23%',
	width : '45%',
	x : '2%',
	y : '49%',

	type : 'line',
	
	plotarea : {
		margin : '40 30 20 8'
	},

	title : {
		text : '3',
		backgroundColor : '#648E9E',
		width : '20px',
		height : '20px',
		fontSize : 12,
		fontColor : '#fff',
		fontWeight : 'normal',
		align : 'right'
	},

	subtitle : {
		text : '<b>Top ten banks average return on common equity,</b> %',
		fontSize : 12,
		fontColor : '#000',
		fontWeight : 'normal',
		align : 'left',
		padding : '0 0 0 5',
		offsetY : -25
	},

	tooltip : {
		text : '%node-value%'
	},

	scaleX : {
		values : ['2005','06','07','08','09','10','11','12','13'],
		offset : 20,
		lineWidth : 1,
		lineColor : '#939298',
		item : {
			fontSize : 11,
			fontColor : '#000',
			fontWeight : 'normal'
		},
		guide : {
			visible : false
		}
	},

	scaleY2 : {
		minValue : 0,
		maxValue : 18,
		step : 2,
		maxItems : 999,
		itemsOverlap : true,
		lineWidth : 0,
		item : {
			fontSize : 11,
			fontColor : '#000',
			fontWeight : 'normal'
		},
		tick : {
			visible : false
		},
		guide : {
			lineWidth : 2,
			lineColor : '#fff'
		}
	},		

	series : [
		{
			values : [17,15,12,3,5,7,9,7,9],
			scales : 'scale-x,scale-y-2',
			lineColor : aColors[3],
			lineWidth : 3,
			marker : {
				size : 1,
				backgroundColor : aColors[3],
				borderColor : aColors[3]
			}
		} 
	]
};

var g5 = {
	backgroundColor : bgColor,

	height : '23%',
	width : '49%',
	x : '49%',
	y : '49%',

	type : 'hbar',
	
	plotarea : {
		margin : '50 10 10 50'
	},

	title : {
		text : '4',
		backgroundColor : '#648E9E',
		width : '20px',
		height : '20px',
		fontSize : 12,
		fontColor : '#fff',
		fontWeight : 'normal',
		align : 'right'
	},

	subtitle : {
		text : '<b>Tier-1 capital</b><br><span style="font-size:11px">As % of risk-weighted assets</span>',
		fontSize : 12,
		fontColor : '#000',
		fontWeight : 'normal',
		align : 'left',
		padding : '0 0 0 5',
		offsetY : -25
	},

	legend : {
		layout : '2x',
		height : '12%',
		margin : '0 50 auto auto',
		backgroundColor : bgColor,
		borderWidth : 0,
		padding : 0,
		item : {
			fontColor : '#000',
			fontSize : 10,
			padding : '0 0 0 4'
		},
		marker : {
			type : 'rectangle',
			borderWidth : 0,
			width : 24,
			height : 10
		}
	},

	tooltip : {
		text : '%node-value%'
	},

	plot : {
		scales : 'scale-x,scale-y-2'
	},

	scaleX : {
		labels : ['Spain','Italy','United<br>States','France','Britain','Germany'],
		lineWidth : 1,
		lineColor : '#939298',
		item : {
			fontSize : 10,
			fontColor : '#000',
			fontWeight : 'normal',
			offsetX : 4
		},
		tick : {
			visible : false
		},
		guide : {
			visible : false
		}
	},

	scaleY2 : {
		minValue : 0,
		maxValue : 14,
		step : 2,
		lineWidth : 0,
		item : {
			fontSize : 11,
			fontColor : '#000',
			fontWeight : 'normal',
			offsetY : 6
		},
		tick : {
			visible : false
		},
		guide : {
			lineWidth : 2,
			lineColor : '#fff'
		}
	},	

	series : [
		{
			values : [8.8,7.2,10,9.4,8.3,8.8],
			backgroundColor : aColors[1],
			text : '2008'

		},
		{
			values : [10,11,13,13,13,13.9],
			backgroundColor : aColors[3],
			text : '2012'
		}
	]
};

var g6 = {
	backgroundColor : bgColor,

	height : '23%',
	width : '45%',
	x : '2%',
	y : '74%',

	type : 'line',
	
	plotarea : {
		margin : '50 30 20 8'
	},

	title : {
		text : '5',
		backgroundColor : '#648E9E',
		width : '20px',
		height : '20px',
		fontSize : 12,
		fontColor : '#fff',
		fontWeight : 'normal',
		align : 'right'
	},

	subtitle : {
		text : '<b>Average compensatio ratio</b><br>Nine global investment banks, Q2, %',
		fontSize : 12,
		fontColor : '#000',
		fontWeight : 'normal',
		align : 'left',
		padding : '0 0 0 5',
		offsetY : -25
	},

	tooltip : {
		text : '%node-value%'
	},

	scaleX : {
		values : ['2007','08','09','10','11','12','13'],
		offset : 20,
		lineWidth : 1,
		lineColor : '#939298',
		item : {
			fontSize : 11,
			fontColor : '#000',
			fontWeight : 'normal'
		},
		guide : {
			visible : false
		}
	},

	scaleY2 : {
		minValue : 36,
		maxValue : 54,
		step : 2,
		maxItems : 999,
		itemsOverlap : true,
		lineWidth : 0,
		item : {
			fontSize : 11,
			fontColor : '#000',
			fontWeight : 'normal'
		},
		tick : {
			visible : false
		},
		guide : {
			lineWidth : 2,
			lineColor : '#fff'
		}
	},		

	series : [
		{
			values : [47.7,53,44,42.8,44.6,43.9,39.8],
			scales : 'scale-x,scale-y-2',
			lineColor : aColors[3],
			lineWidth : 3,
			marker : {
				size : 1,
				backgroundColor : aColors[3],
				borderColor : aColors[3]
			}
		} 
	]
};

var g7 = {
	backgroundColor : bgColor,

	height : '23%',
	width : '49%',
	x : '49%',
	y : '74%',

	type: 'mixed',
	
	plotarea : {
		margin : '50 30 20 8'
	},

	title : {
		text : '6',
		backgroundColor : '#648E9E',
		width : '20px',
		height : '20px',
		fontSize : 12,
		fontColor : '#fff',
		fontWeight : 'normal',
		align : 'right'
	},

	subtitle : {
		text : '<b>Financial-sector employees</b><br>\'000',
		fontSize : 12,
		fontColor : '#000',
		fontWeight : 'normal',
		align : 'left',
		padding : '0 0 0 5',
		offsetY : -25
	},

	labels : [
		{
			text : '% of city total',
			backgroundColor : "#fff",
			borderWidth : 1,
			borderColor : aColors[3],
			fontColor : '#000',
			fontSize : 10,
			padding : 3,
			callout : true,
			offsetX : 12,
			offsetY : -50,
			hook : 'node:plot=2,index=1'
		}
	],

	tooltip : {
		text : '%node-value'
	},

	scaleX : {
		values : ['Dec 2007','Mar 2013'],
		offset : 45,
		maxValue : 5,
		lineWidth : 0,
		item : {
			fontSize : 11,
			fontColor : '#000',
			fontWeight : 'normal'
		},
		markers : [
			{
				type : 'line',
				lineWidth : 2,
				lineColor : '#000',
				range : [0]
			},
			{
				type : 'line',
				lineWidth : 2,
				lineColor : '#000',
				range : [1]
			}
		],
		tick : {
			visible : false
		},
		guide : {
			visible : false
		}
	},

	scaleX2 : {
		minValue : 0,
		maxValue : 2,
		step : 1,
		lineWidth : 0,
		item : {
			visible : false
		},
		tick : {
			visible : false
		},
		grid : {
			visible : false
		}
	},

	scaleY2 : {
		minValue : 150,
		maxValue : 500,
		step : 50,
		maxItems : 999,
		itemsOverlap : true,
		lineWidth : 0,
		item : {
			fontSize : 11,
			fontColor : '#000',
			fontWeight : 'normal'
		},
		tick : {
			visible : false
		},
		guide : {
			lineWidth : 2,
			lineColor : '#fff'
		}
	},

	series : [
		{
			type : 'line',
			values : [180,215],
			scales : 'scale-x,scale-y-2',
			lineColor : aColors[0],
			lineWidth : 3,
			valueBox : [
				{
					width : 30,
					borderWidth : 1,
					borderColor : aColors[3],
					backgroundColor : '#fff',
					shadow : 0,
					fontSize : 10,
					fontColor : '#000',
					fontWeight : 'normal',
					align : 'center',
					padding : 2,
					placement : 'out',
					type : 'first',
					text : '7.3 ',
					offsetX : -25
				},
				{
					width : 30,
					borderWidth : 1,
					borderColor : aColors[3],
					backgroundColor : '#fff',
					shadow : 0,
					fontSize : 10,
					fontColor : '#000',
					fontWeight : 'normal',
					align : 'center',
					padding : 2,
					placement : 'out',
					type : 'last',
					text : '7.7 ',
					offsetX : 25
				}
			],
			marker : {
				size : 5,
				backgroundColor : '#fff',
				borderWidth : 2,
				borderColor : aColors[0]
			}
		},
		{
			type : 'line',
			values : [360,370],
			scales : 'scale-x,scale-y-2',
			lineColor : aColors[1],
			lineWidth : 3,
			valueBox : [
				{
					width : 30,
					borderWidth : 1,
					borderColor : aColors[3],
					backgroundColor : '#fff',
					shadow : 0,
					fontSize : 10,
					fontColor : '#000',
					fontWeight : 'normal',
					align : 'center',
					padding : 2,
					placement : 'out',
					type : 'first',
					text : '7.4 ',
					offsetX : -25
				},
				{
					width : 30,
					borderWidth : 1,
					borderColor : aColors[3],
					backgroundColor : '#fff',
					shadow : 0,
					fontSize : 10,
					fontColor : '#000',
					fontWeight : 'normal',
					align : 'center',
					padding : 2,
					placement : 'out',
					type : 'last',
					text : '7.2 ',
					offsetX : 25
				}
			],
			marker : {
				size : 5,
				backgroundColor : '#fff',
				borderWidth : 2,
				borderColor : aColors[1]
			}
		},
		{
			type : 'line',
			values : [480,440],
			scales : 'scale-x,scale-y-2',
			lineColor : aColors[3],
			lineWidth : 3,
			valueBox : [
				{
					width : 30,
					borderWidth : 1,
					borderColor : aColors[3],
					backgroundColor : '#fff',
					shadow : 0,
					fontSize : 10,
					fontColor : '#000',
					fontWeight : 'normal',
					align : 'center',
					padding : 2,
					placement : 'out',
					type : 'first',
					text : '12.3 ',
					offsetX : -25
				},
				{
					width : 30,
					borderWidth : 1,
					borderColor : aColors[3],
					backgroundColor : '#fff',
					shadow : 0,
					fontSize : 10,
					fontColor : '#000',
					fontWeight : 'normal',
					align : 'center',
					padding : 2,
					placement : 'out',
					type : 'last',
					text : '11.1 ',
					offsetX : 25
				}
			],
			marker : {
				size : 5,
				backgroundColor : '#fff',
				borderWidth : 2,
				borderColor : aColors[3]
			}
		},
		{
			type : 'scatter',
			scales : 'scale-x-2,scale-y-2',
			values : [1,460],
			marker : {
				size : 0,
				borderWidth : 0,
				backgroundColor : aColors[3]
			},
			valueBox : {
				text : 'New York City',
				fontColor : '#000',
				fontSize : 11,
				fontWeight : 'normal'
			},
			tooltip : {
				visible : false
			}
		},
		{
			type : 'scatter',
			scales : 'scale-x-2,scale-y-2',
			values : [1,365],
			marker : {
				size : 0,
				borderWidth : 0,
				backgroundColor : aColors[1]
			},
			valueBox : {
				text : 'London',
				fontColor : '#000',
				fontSize : 11,
				fontWeight : 'normal'
			},
			tooltip : {
				visible : false
			}
		},
		{
			type : 'scatter',
			scales : 'scale-x-2,scale-y-2',
			values : [1,199],
			marker : {
				size : 1,
				borderWidth : 0,
				backgroundColor : aColors[0]
			},
			valueBox : {
				text : 'Hong Kong',
				fontColor : '#000',
				fontSize : 11,
				fontWeight : 'normal'
			},
			tooltip : {
				visible : false
			}
		}
	]
};


var chartJSON = {
	backgroundColor : bgColorMain,

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

var 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) {

	var aShapes = [];

	for (var i = 0; i < aLinks.length; i++) {

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

		var 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 : "zc",
	width : 800,
	height : 900,
	output : "svg",
	data : chartJSON
});

              
            
!
999px

Console