index.html

## 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>