Vertical legends in external container on Stock Chart

by amcharts

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>
<div id="legend1">
    <p><strong>Value</strong></p>
    <div id="legend1-inside"></div>
</div>
<div id="legend2">
    <p><strong>Volume</strong></p>
    <div id="legend2-inside"></div>
</div>

CSS

body {
    font-family: Verdana;
    font-size: 12px;
    padding: 10px;
}
#chartdiv {
	width	: 70%;
	height	: 500px;
    float: left;
}
#legend1, #legend2 {
    width: 26%;
    height: 300px;
    float: left;
    margin-left: 10px;
    overflow: auto;
}
#legend2 {
    height: 200px;
}
strong {
    font-weight: bold;
}
}

JavaScript

var chartData1 = [];
var chartData2 = [];
var chartData3 = [];
var chartData4 = [];

generateChartData();

function generateChartData() {
	var firstDate = new Date();
	firstDate.setDate(firstDate.getDate() - 500);
	firstDate.setHours(0, 0, 0, 0);

	for (var i = 0; i < 500; i++) {
		var newDate = new Date(firstDate);
		newDate.setDate(newDate.getDate() + i);

		var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
		var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;

		var a2 = Math.round(Math.random() * (100 + i)) + 200 + i;
		var b2 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;

		var a3 = Math.round(Math.random() * (100 + i)) + 200;
		var b3 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;

		var a4 = Math.round(Math.random() * (100 + i)) + 200 + i;
		var b4 = Math.round(Math.random() * (100 + i)) + 600 + i;

		chartData1.push({
			date: newDate,
			value: a1,
			volume: b1
		});
		chartData2.push({
			date: newDate,
			value: a2,
			volume: b2
		});
		chartData3.push({
			date: newDate,
			value: a3,
			volume: b3
		});
		chartData4.push({
			date: newDate,
			value: a4,
			volume: b4
		});
	}
}

var chart = AmCharts.makeChart("chartdiv", {
	type: "stock",
    "theme": "none",
    pathToImages: "http://www.amcharts.com/lib/3/images/",

	dataSets: [{
			title: "first data set",
			fieldMappings: [{
				fromField: "value",
				toField: "value"
			}, {
				fromField: "volume",
				toField: "volume"
			}],
			dataProvider: chartData1,
			categoryField: "date"
		},

		{
			title: "second data set",
			fieldMappings: [{
				fromField: "value",
				toField: "value"
			}, {
				fromField: "volume",
				toField: "volume"
			}],
			dataProvider: chartData2,
			categoryField: "date",
            compared: true
		},

		{
			title: "third data set",
			fieldMappings: [{
				fromField: "value",
				toField: "value"
			}, {
				fromField: "volume",
				toField: "volume"
			}],
			dataProvider: chartData3,
			categoryField: "date",
           ...