DanielJWood · August 29, 2015 13:56
diff --git a/index.html b/index.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
 <html>
 <head>
 	<meta charset="utf-8" />
 	<title>Falling Price of Utility-Scale PV Projects</title>

 	<style type="text/css">
        #container {
        height: 600px; 
        margin: 0 auto
    }


 @media (max-width: 570px) {
    #container {
        height: 320px !important;
    }
    #scroll-area {
      width: 40px;
      height: 100%;
      position: absolute;
      z-index: 20000;
      right: 0px;
    } 
 }
 @media (max-width: 480px) {
    #container {
        height: 255px !important;
    }

 }
 @media (max-width: 320px) {
    #container {
        height: 320px !important;
    }
   
 }

 .highcharts-tooltip span {
    height:auto;
    width:140px;
    overflow:auto;
    white-space:normal !important; // add this line...
 }
 	</style>

 </head>

 <body>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

 <script src="http://code.highcharts.com/highcharts.js"></script>

 <div id='scroll-area'></div>

 <div id="container"></div>
 <script type="text/javascript">
 //updated 11/13/13

 var items = [
 [11,10.9,5.9,3.7],
 [1.6,1.6,1.4,1],
 [2,1.9,1.9,1.9],
 [6.8,5.4,4.8,4.6]
 ];

 var cars = ["Module","Inverter","Other Hardware (Wires, Fuses, Mounting Racks)","Soft Costs (Permitting, Inspection, Installation)"];

 var date = ["2010","2011","2012","2013"];

 (function ($) {
 $(document).ready(function() {
 	
        $('#container').highcharts({
            chart: {
                type: 'column',
                borderRadius: 0,
 	            backgroundColor: '#FFFFFF'
            },
            title: {	           
 	            style: {
 	            	color: '#333333',
 					fontSize: '16px'
 	            },
 	          	text: 'The Falling Price of Utility-Scale Solar Photovoltaic (PV) Projects'	          	
 	        },
            colors: [
 			   '#E1408C',
 			   '#FF8849',
 			   '#37C197',
 			   '#ADF145'	   
 			],
            legend: {
            	layout: 'vertical',
            	verticalAlign: 'top',
            	align: 'right',
            	floating: true,
            	x: -10,
            	y: 45,
            	backgroundColor: '#ffffff',
            	borderRadius: 1,
            	width: 160,
                itemStyle: {
                    width: 160
                },
            	title: {
            		style: {
            			fontStyle: 'italic'
            		}
            	}
            },
            xAxis: {
                categories: date,
                labels: {
 					x: 10,
 					y:15,
                	align: "right"
                },
                tickInterval: 1
            },
            yAxis: {
            	tickInterval: 2,
                title: {
                    text: 'Cost of Electricity, cents per kWh',
                    style: {
 						color: '#555555',
 						fontWeight: 'bold'
 					}
                },
                plotLines : [{
 					value : 6,
 					color : '#127E5D',
 					zIndex: 5,
 					dashStyle : 'shortdash',
 					width : 2,
 					label : {
 						text : '2020 Goal of 6 c/kWh'
 					}
 				}]                
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y +' c/kWh<br/>'+
                        'Total: '+ this.point.stackTotal + ' c/kWh<br/>';
                },
                useHTML: true
            },
            plotOptions: {
                column: {
                    stacking: 'normal'
                },
 				series: {
 					pointPadding: .000001
 				}
            },
            series: [

 				{
                    dataLabels: {
                         enabled: true,
                         formatter: function() {
                              return 'Total: ' + this.total + 'c/kWh';
                          },
                          inside: false,
                          style: {
                            color: "black",
                            fontWeight: 'bold',
                            
                          }
                    }, 
 					name: cars[0],
 					data: items[0]
 				},
 				{
 					name: cars[1],
 					data: items[1]
 				},
 				{
 					name: cars[2],
 					data: items[2]
 				},
 				{
 					name: cars[3],
 					data: items[3]
 				}
            ]
        });
    });
 }(jQuery));    


 </script>
 </body>
 </html>

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
	"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Falling Price of Utility-Scale PV Projects</title>

	<style type="text/css">
	#container {
	height: 600px;
	margin: 0 auto
	}


	@media (max-width: 570px) {
	#container {
	height: 320px !important;
	}
	#scroll-area {
	width: 40px;
	height: 100%;
	position: absolute;
	z-index: 20000;
	right: 0px;
	}
	}
	@media (max-width: 480px) {
	#container {
	height: 255px !important;
	}

	}
	@media (max-width: 320px) {
	#container {
	height: 320px !important;
	}

	}

	.highcharts-tooltip span {
	height:auto;
	width:140px;
	overflow:auto;
	white-space:normal !important; // add this line...
	}
	</style>

	</head>

	<body>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

	<script src="http://code.highcharts.com/highcharts.js"></script>

	<div id='scroll-area'></div>

	<div id="container"></div>
	<script type="text/javascript">
	//updated 11/13/13

	var items = [
	[11,10.9,5.9,3.7],
	[1.6,1.6,1.4,1],
	[2,1.9,1.9,1.9],
	[6.8,5.4,4.8,4.6]
	];

	var cars = ["Module","Inverter","Other Hardware (Wires, Fuses, Mounting Racks)","Soft Costs (Permitting, Inspection, Installation)"];

	var date = ["2010","2011","2012","2013"];

	(function ($) {
	$(document).ready(function() {

	$('#container').highcharts({
	chart: {
	type: 'column',
	borderRadius: 0,
	backgroundColor: '#FFFFFF'
	},
	title: {
	style: {
	color: '#333333',
	fontSize: '16px'
	},
	text: 'The Falling Price of Utility-Scale Solar Photovoltaic (PV) Projects'
	},
	colors: [
	'#E1408C',
	'#FF8849',
	'#37C197',
	'#ADF145'
	],
	legend: {
	layout: 'vertical',
	verticalAlign: 'top',
	align: 'right',
	floating: true,
	x: -10,
	y: 45,
	backgroundColor: '#ffffff',
	borderRadius: 1,
	width: 160,
	itemStyle: {
	width: 160
	},
	title: {
	style: {
	fontStyle: 'italic'
	}
	}
	},
	xAxis: {
	categories: date,
	labels: {
	x: 10,
	y:15,
	align: "right"
	},
	tickInterval: 1
	},
	yAxis: {
	tickInterval: 2,
	title: {
	text: 'Cost of Electricity, cents per kWh',
	style: {
	color: '#555555',
	fontWeight: 'bold'
	}
	},
	plotLines : [{
	value : 6,
	color : '#127E5D',
	zIndex: 5,
	dashStyle : 'shortdash',
	width : 2,
	label : {
	text : '2020 Goal of 6 c/kWh'
	}
	}]
	},
	tooltip: {
	formatter: function() {
	return '<b>'+ this.x +'</b><br/>'+
	this.series.name +': '+ this.y +' c/kWh<br/>'+
	'Total: '+ this.point.stackTotal + ' c/kWh<br/>';
	},
	useHTML: true
	},
	plotOptions: {
	column: {
	stacking: 'normal'
	},
	series: {
	pointPadding: .000001
	}
	},
	series: [

	{
	dataLabels: {
	enabled: true,
	formatter: function() {
	return 'Total: ' + this.total + 'c/kWh';
	},
	inside: false,
	style: {
	color: "black",
	fontWeight: 'bold',

	}
	},
	name: cars[0],
	data: items[0]
	},
	{
	name: cars[1],
	data: items[1]
	},
	{
	name: cars[2],
	data: items[2]
	},
	{
	name: cars[3],
	data: items[3]
	}
	]
	});
	});
	}(jQuery));


	</script>
	</body>
	</html>