$('#dummy').highcharts({ chart: { type: 'bar' }, title: { text: 'Achieved vs Expected Learning Outcomes' }, xAxis: { categories: [ "Outcome 1", "Outcome 2", "Outcome 3", "Outcome 4", "Outcome 5", "Outcome 6", "Outcome 7", "Outcome 8", "Outcome 9", "Outcome 10", ], labels: { style: { fontSize:'11px' } } }, yAxis: { min: 0, max: 100, title: { text: 'Percentage' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.2f}</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [{ name: 'Achieved', color: '#e70033', data:[ 73.52, 85.04, 47.8, 35.82, 68.69, 45.3, 69.7, 98.45, 87.65, 54.54 ] }, { name: 'Expected', color: '#555555', data: [ 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, ] }] });