for bar chart done
by tin nguyen
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="chart" style="width: 640px; height: 420px;"></div>
JavaScript
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
defaultSeriesType: 'bar'
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5', 'Category 6', 'Category 7', 'Category 8', ]
},
yAxis: {
labels: {
enabled: false
},
title: {
text: null
},
gridLineColor: '#eeeeee'
},
legend: {
reversed: true,
itemStyle: {
cursor: null,
color: '#000000',
}
},
tooltip: {
formatter: function () {
return '' + this.series.name + ': ' + this.percentage.toFixed(0) + '%';
}
},
plotOptions: {
series: {
events: {
legendItemClick: function (event) {
return false;
}
}
},
bar: {
stacking: 'normal',
shadow: false,
pointPadding: 0.1,
borderWidth: 0,
dataLabels: {
enabled: true,
color: '#000000',
formatter: function () {
if (this.percentage.toFixed(0) > 0) return this.percentage.toFixed(0);
else return '';
}
}
}
},
series: [{
name: 'Serie 1',
data: [112, 23, 39, 42, 34, 6, 0, 4 ],
color: '#e51919'
}, {
name: 'Serie 2',
data: [1277, 808, 362, 334, 227, 171, 123, 89 ],
...