Jugal | Overlapping Columns | Highcharts & Highstock
http://stackoverflow.com/questions/12540720/overlapping-stacked-column
Jugal Thakkar
http://jugal.me/
by Murali Kaliappan
HTML
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js" ></script>
<script type="text/javascript" src="http://code.jugal.me/js/jugalsLib.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.src.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/modules/exporting.src.js" ></script>
<div id="container"></div>
CSS
#container {
width: 900px;
}
JavaScript
var chartingOptions = {
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: [ "CYL-CHAMFERING",
"CYL-FINALQAINSPECTION",
"CYL-GLAZEDFIRING",
"CYL-GLAZING",
"CYL-GREEN VISUALINSPECTION",
"CYL-GREENMACHINING",
"CYL-METALLISEDFIRING",
"CYL-METZCOATING",
"CYL-PLATING",
"CYL-TK3INSPECTION",
"CYL-WASHLINE"]
},
plotOptions: {
column: {
pointWidth : 10
}
},
series: [
{
data: [
0.99,
100,
11.23,
100,
3.37,
5.27,
29.25,
1.85,
100,
5.64,
4.44
]},
]
};
chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);