bar
by jayhilwig
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 500px"></div>
JavaScript
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
margin: [50, 50, 100, 80]
},
title: {
text: null
},
xAxis: {
labels: {
style: {
color: '#000',
font: 'normal 18px HaasGrotDisp75Bold, sans-serif',
}
},
tickmarkPlacement: 'off',
tickWidth: 0,
categories: [
'Average',
'Peak', ]
},
yAxis: {
labels: {
style: {
color: '#000',
font: 'normal 12px HaasGrotDisp55Roman, sans-serif',
}
},
tickmarkPlacement: 'off',
min: 0,
title: {
text: null
}
},
tooltip: {
enabled: false,
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '°C';
}
},
plotOptions: {
series: {
stacking: 'normal',
pointPadding: 0.0,
groupPadding: .1,
borderWidth: 0,
shadow: {
width: 2,
opacity: 0.25,
offsetY: 0,
offsetX: 1
},
dataLabels: {
enabled: true,
inside: true,
align: 'right',
color: '#FFFFFF',
x: -10,
format: '{y} kb',
style: {
fontFamily: 'HaasGrotDisp75Bold, sans-serif',
fontSize: '32px',
textShadow: "1px 1px 2px #111",
}
}
...