Highcharts not rendering in internet explorer

Asked by
I have an issue that only seems to affect internet explorer 8.

I have used the highcharts.js script from http://www.highcharts.com/ to display data on my site however I have tried to display this data within a lightbox and have used the lightbox_me.js script from http://buckwilson.me/lightboxme/

I will try to show the code I have used:

<script type="text/javascript">

var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'analysis',
defaultSeriesType: 'bar',
backgroundColor: 'rgba(0,0,0,0)'
title: {
text: ''
subtitle: {
text: ''

xAxis: {
categories: ['First Impressions', 'Politeness/Courtesy', 'Helpfulness', 'Speed and Efficiency', 'Reliability', 'Trustworthiness', 'Value for Money', 'Quality of service', 'After Sales', 'Overall Satisfaction'],
title: {
text: null
yAxis: {
min: 0,
title: {
text: 'Overall Score (%)',
align: 'middle'
tooltip: {
formatter: function() {
return ''+
this.y +' %';
plotOptions: {

bar: {
dataLabels: {
enabled: false

legend: {
enabled: false,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: false
credits: {
enabled: false
series: [{
name: 'Year 2012',
data: [<?php echo "$first_impression".","."$politeness".","."$knowledge".","."$speed".","."$reliability".","."$honesty".","."$value".","."$quality".","."$after_sales".","."$satisfaction"; ?>]


As you can see, I have used php to insert the stats.

I then have the lightbox script:

$('#scores_button').click(function(e) {
centered: true, 
onLoad: function() { 
This is the html:

<div id='scores_container'>

<h1 class='lightbox_header'>Areas of Performance</h1>

<div id='analysis'>


<p class='lightbox_paragraph'>We asked all repondents to score the business on it's performance in the areas above. This chart shows the average scores in each area.</p>

<a id='close_x' class='close sprited' href='#'>close</a>

And finally my CSS

#scores_container {
padding:30px 40px 40px 40px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #536376;
-webkit-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
-moz-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
box-shadow: rgba(0,0,0,.6) 0px 2px 12px;

border-bottom:1px solid #cdd0d9;


p.lightbox_paragraph, p.lightbox_paragraph_first{
font-family: 'PT Sans', sans-serif;
border-top:1px solid #cdd0d9;
This code works in all browsers I have tested but internet explorer. Internet explorer 8 is the browser that I have been using whilst trying to find a solution.

Please see this screenshot of how it appears in ie8:

Internet Explorer 8

And how it appears in Google Chrome:

Google Chrome

My thoughts are that maybe it is my css causing the problem but no matter what I try I can't seem to get the chart to display. The chart container is also not centered vertically within the browser window but this is something I can work on once I get the chart to render. Any help would be much appreciated.

I know it's not a particularly well built site as I am only learning but please see the following link to the site itself, if it will help: http://www.bbg.im/development

The error is occurring on the profile pages when the chart icon is clicked.

I also am experiencing the same/similar issue with pie charts and google maps in the same lightbox script.

Many thanks.

Best Answer

Answer by
Just viewed the source of the HTML file and surprised to see the extra comma in the array.

series: [{ name: 'Year 2012', data: [95,100,95,95,95,100,80,90,93,] }]

Could you please remove the trailing comma at the end of the data array. i.e. the data array should render like this.

series: [{ name: 'Year 2012', data: [95,100,95,95,95,100,80,90,93] }]

Your Answer