Highcharts column chart rendering transparent columns in IE8

Question

Screenshot

The column chart renders fine on all browsers except IE8. This is such a strange error. I can't replicate it in jsfiddle (yes I tried with the Jquery version I am using-1.9.1 as well)but I put the code on it in hopes someone has faced the same problem before. http://jsfiddle.net/danushkab/kp5es/6/

$('#monthlychart').highcharts({ chart: { type: 'column', events: { click: function(event) { location = '/GVEMS_2.0/cvh/monthConsumption?date=08/2013&building=cvhcampus'; } } }, title: { text: 'August Consumption' }, xAxis: { type: 'datetime', tickInterval : 3*24 * 3600 * 1000, dateTimeLabelFormats: { day: '%e', }, labels: { rotation: 0, align: 'right', style: { fontSize: '9px', fontFamily: 'Verdana, sans-serif' } }

},
yAxis: {
    title: {
    text: 'kWh'
    },
min: 0
},
tooltip: {
    enabled:false
    },
exporting: {
    enabled:false
    },
credits: {
    enabled:false
    },
legend:{
    enabled:false
    },
plotOptions: {
    series: {
    marker: {
    enabled: false
    }
},
area: {
    events: {
    click: function(event) {
    // do something
    alert('Message goes here');
    }
}
}
},
series: [{
    name: 'Expected',
    color: '#FFA500',
    // Define the data points. All series have a dummy year
    // of 1970/71 in order to be compared on the same x axis. Note
    // that in JavaScript, months start at 0 for January, 1 for February etc.
    data: [
    [Date.UTC(2013, 7, 01),600  ],
    [Date.UTC(2013, 7, 02), 600   ],
    [Date.UTC(2013, 7, 03), 600     ],
    [Date.UTC(2013, 7, 04), 600   ],
    [Date.UTC(2013, 7, 05), 600    ],
    [Date.UTC(2013, 7, 06), 200    ],
    [Date.UTC(2013, 7, 07), 200    ],
    [Date.UTC(2013, 7, 08), 600    ],
    [Date.UTC(2013, 7, 09), 600     ],
    [Date.UTC(2013, 7, 10), 600     ],
    [Date.UTC(2013, 7, 11),600  ],
    [Date.UTC(2013, 7, 12), 600 ],
    [Date.UTC(2013, 7, 13), 200    ],
    [Date.UTC(2013, 7, 14), 200    ],
    [Date.UTC(2013, 7, 15), 600    ],
    [Date.UTC(2013, 7, 16), 600    ],
    [Date.UTC(2013, 7, 17), 600    ],
    [Date.UTC(2013, 7, 18), 600    ],
    [Date.UTC(2013, 7, 19), 600    ],
    [Date.UTC(2013, 7, 20), 200    ],
    [Date.UTC(2013, 7, 21), 200    ],
    [Date.UTC(2013, 7, 22), 600    ],
    [Date.UTC(2013, 7, 23), 600    ],
    [Date.UTC(2013, 7, 24), 600    ],
    [Date.UTC(2013, 7, 25), 600    ],
    [Date.UTC(2013, 7, 26), 600    ],
    [Date.UTC(2013, 7, 27), 200    ],
    [Date.UTC(2013, 7, 28), 200    ],
    [Date.UTC(2013, 7, 29), 600    ],
    [Date.UTC(2013, 7, 30), 600    ],
    [Date.UTC(2013, 7, 31), 600    ]
    ]
    }, {
    name: 'Actual',
    color: '#008000',
    data: [
    [Date.UTC(2013,7,1,0,0),26924.8725],[Date.UTC(2013,7,2,0,0),27782.64],[Date.UTC(2013,7,3,0,0),24195.7125],[Date.UTC(2013,7,4,0,0),21953.483288574],[Date.UTC(2013,7,5,0,0),22638.2603125],[Date.UTC(2013,7,6,0,0),23730.837127685],[Date.UTC(2013,7,7,0,0),24663.125631104],[Date.UTC(2013,7,8,0,0),28356.6825],[Date.UTC(2013,7,9,0,0),29145.711612549],[Date.UTC(2013,7,10,0,0),25810.3125],[Date.UTC(2013,7,11,0,0),22475.425946045],[Date.UTC(2013,7,12,0,0),26638.29],[Date.UTC(2013,7,13,0,0),27391.2075],[Date.UTC(2013,7,14,0,0),24108.060698242],[Date.UTC(2013,7,15,0,0),23461.750699463],[Date.UTC(2013,7,16,0,0),23477.921824951],[Date.UTC(2013,7,17,0,0),22509.527792969],[Date.UTC(2013,7,18,0,0),22666.365],[Date.UTC(2013,7,19,0,0),25029.497049561],[Date.UTC(2013,7,20,0,0),27556.8975],[Date.UTC(2013,7,21,0,0),28670.6025],[Date.UTC(2013,7,22,0,0),29151.765],[Date.UTC(2013,7,23,0,0),26790.615],[Date.UTC(2013,7,24,0,0),22380.954549561],[Date.UTC(2013,7,25,0,0),22478.057036133],[Date.UTC(2013,7,26,0,0),25803.405],[Date.UTC(2013,7,27,0,0),29242.4175],[Date.UTC(2013,7,28,0,0),27244.129099121],[Date.UTC(2013,7,29,0,0),0],[Date.UTC(2013,7,30,0,0),0],
    ]
    }]
});

I tried zooming in IE8 and on one zoom level I can see the columns faintly. enter image description here

It works well in jsfiddle as you mentioned, but without possibility to reproduce, it can be difficult find a reason. In our bugtracker (github.com/highslide-software/highcharts.com) we have no this issue. — Sebastian Bochan
the issue was resolved by removing the second series from the chart. I am assuming that IE8 has some problem rendering two series in column chart when the chart is small. — Danushka Bandara

Danushka Bandara Danushka Bandara · Accepted Answer · 2013-08-31T21:43:53

I figured out the problem. It seems highcharts is having trouble rendering when I have multiple series in the small column chart. It rendered properly when I removed the second series from the column chart.

Highcharts column chart rendering transparent columns in IE8

1 Answers