Chart.js: charts don't show up in IE 8

I get Object doesn't suport this property or method on this line:

var ctx = sellerGraph.get(0).getContext("2d");

I have included excanvas.

About this issue

Original URL
State: closed
Created 11 years ago
Comments: 29 (7 by maintainers)

Most upvoted comments

I know this is long closed, but I wanted to share some insight on this topic in case others needed it. I got chart.js working in IE8 and I had to do several different things to get it working.

Load the excanvas JS lib into your project <head><script type="PATHTOJSFOLDER/js/excanvas.js"></script></head> (while you’re at it make sure that the Chart.js lib is properly loaded too)

Implement Polyfills Implement 3 different polyfills for functions that are deprecated in legacy IE browsers:

Array.prototype.forEach forEach JS Page (Scroll down to Polyfill section)
Object.keys Object.keys JS Page (Scroll down to Polyfill section)
defineProperties defineProperties JS Page (Scroll down to Polyfill section)

If you don’t want to manually insert the polyfills into your project & you’re lazy like me, polyfills for these functions can be found in the Modernizr JS Library & the lib can be loaded into your project.

Manually Create The Canvas Object Here’s the jquery that I used to render the canvas element inside of a div.

    jQuery(function($) { // DOM is now ready and jQuery's $ alias sandboxed
        var ChartHelperItem = (function ChartHelper() {
            return {
                createChart: function (containerSelector) {
                    //Loads the context only after the <canvas> tags are initiated (solution for ie8-)
                    var elContainer = $('#event-chart-container').get(0);

                    // create canvas object
                    var c = document.createElement('canvas');

                    if (!c.getContext) {
                        c.width = 300; //define a width else IE8 complains
                    }

                    c.height = 450; //define a height else IE8 complains

                    // only use excanvas when necessary
                    //getContext won't be defined in IE8 so let's use excanvas to create the canvas
                    if (!c.getContext) {
                        c = G_vmlCanvasManager.initElement(c);
                    }

                    // this only works after page-reflow
                    setTimeout(function () {

                        // create ChartJS object
                        var ctx = c.getContext('2d');
                        var graphChart = new Chart(ctx, {
                            type: 'horizontalBar',   // fancy horizontal bar included in release 2.1.2 of Chart.js
                            data: {
                                labels: ["Red", "Green", "Blue"],
                                datasets: [{
                                    label: "Colors",
                                    data: [3,6,9]
                                }]
                            },
                            options: {
                                animation:false, //can't have any animations in IE8 :(
                                scales: {
                                    xAxes: [{
                                        ticks: {
                                            beginAtZero:true
                                        },
                                        stacked: true
                                    }],
                                    yAxes: [{
                                        stacked: true
                                    }]
                                },
                                maintainAspectRatio: false
                            }
                        });
                    }, 0);
                    elContainer.appendChild(c);
                },
                isInitialized: false,
                initialize: function () {
                    if (!!this.isInitialized) {
                        return;
                    }
                    this.isInitialized = true;
                    this.createChart('#event-chart-container');
                }
            };
        }());

        ChartHelperItem.initialize();
    });

Insert Canvas Object Into Div And the chart was beautifully drawn in IE8 inside of this div (note how ID is referenced in code above, this places the chart’s <canvas> element inside of the DIV): `<div id="event-chart-container">

</div>`

brittanynavin on May 10, 2016