stacked and unstacked series

by jlbriggs

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height:400px;"></div>

JavaScript

Highcharts.setOptions ({
			chart: {
				marginLeft:50,
				marginRight:110,
				zoomType:'x',
	        	resetZoomButton: {
	                position: {
	                    align:'left',
	                    x:5,
	                    y:-5
	                }
	            }
        	},
		    title:{text:''},
		    legend:{
				align:'right',
				layout:'vertical',
				verticalAlign:'top',
				y:10,
			},
		    tooltip:{
				useHtml:true,
				crosshairs:[{width:1, color:'#ccc'},{width:1, color:'#ccc'}],
			    borderRadius:2,
			    borderWidth:1,
			    borderColor:'#999',
			    shared: true,
	            useHTML: true,
				yDecimals:0,
	            valueDecimals:0,
	            xDateFormat: '%I:%M %P',
                headerFormat: '<table class="detail"><caption>{point.key}</caption><tbody>', 
	            pointFormat: '<tr><td style="color: {series.color}">Wave {series.name}: </td>' +
	            '<td style="text-align: right"><b>{point.y}</b></td></tr>',
	            footerFormat: '</tbody></table>',
	        },
			plotOptions:{
				series:{
					connectNulls:true,
					lineWidth:1,
					fillOpacity:.25,
					stacking:'normal',
					dataLabels: {
						align:'right',
						y:-5,
						x:10,
						formatter:function(){
							return '<span style="font-weight:bold;">'+ Highcharts.numberFormat(this.y,0) +'</span>' + ' total lines';
						}
					},
                    marker:{
                        enabled:false
                    }
				}
			},
		    xAxis:{
				//min:,
				//max:,
		    	type:'datetime',
		        allowDecimals:false,
		       ...