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

[chalmagean]

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

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

I have included excanvas.

[nirre7]

Bumped into this one as well ;)

The excanvas is "extended" in the examples on the chartjs site ;) that is why it works on the main chartjs site on IE8.
The author of this great lib should probably mention that for us folks that need to support IE8.
However since the lib is so awesome I don't have a grudge, it took me a fair bit of time to find the method not supported in the original excanvas ... :p

Solution: just grab the excanvas version that you get when you download the lib -> site/assets, adn use it ;)

[chalmagean]

Hmm are you sure about that ? It doesn't seem to work for me.

[nnnick]

I grabbed the latest version of excanvas from the Google code project.

Available here: https://code.google.com/p/explorercanvas/source/browse/trunk/excanvas.js

There's a note in the docs for when using excanvas:

"Initialise charts on load rather than DOMContentReady when using the library, as sometimes a race condition will occur, and it will result in an error when trying to get the 2d context of a canvas."

Let me know if this solves your issue.

[chalmagean]

I don't get the error anymore in IE8 but in IE9 I still get the stretched looking graph.

[jowilki]

@nirre7 Thanks, you rock. I grabbed the version of excanvas that comes with Charts.js and problem solved. The version directly from excanvas project site didn't work for me. I have the graphs working in IE7 and IE8 now.

I also recommend (as mentioned in Chart.js documentation) to turn off animation for browsers without native canvas support. It was really sluggish for me. You simply include Modernizr in your page and the following:

var globalGraphSettings = {animation : Modernizr.canvas};
var myChart = new Chart(document.getElementById("gChart").getContext("2d")).Line(myData, globalGraphSettings);

[nnnick]

Can you up a test case for me to take a look at @mixandgo? It looks like possibly a CSS thing?

Not too sure why the version of the excanvas library and the version they're using in their master branch are different...

[yjp211]

I got this problem and it's working now.
Using the excanvas.js from svn trunk of google code:
http://explorercanvas.googlecode.com/svn/trunk/excanvas.js
Issue 52 is helpful.
https://code.google.com/p/explorercanvas/issues/detail?id=52&can=1

[airblade]

@jowilki Thanks for the Modernizr snippet.

[myozarni]

@nnnick

I still couldn't get to work in IE8 & IE7, even tho including excanvas.js

please help me. I was trying to fix it for a day already. :(

thanks very much in advance.

[myozarni]

i have sorted that out now.

It was CSS that was giving me problems.

In case people might face this as well. Here is what i have done.

I have the following css for responsive (bootstrap)

canvas{width:100% !important;max-width: 800px;height: auto !important;}

Because of that, IE7 & IE8 is not showing the canvas at all.

After removing that it works now.

For responsive stuffs, I am filtering with @media queries now.

[vigneshvdm]

Hello,
I downloaded the latest version of chartjs, added the excanvas.js into the line.html but still its not working in ie8
It works fine when i set document standards to ie9

[sesamechicken]

I had the same issue - using the excanvas.js file from the repo and NOT the google code site is what squared it away:.
https://raw.github.com/nnnick/Chart.js/master/site/assets/excanvas.js

[ptgamr]

The following steps work for me:

1. Use the excanvas.js packed with chart.js.
2. If you're want to keep using .documentReady() you have to dynamically create the canvas element:

//dynamically create the canvas element
var canvas = document.createElement('canvas');
document.getElementById("wt-today-chart").appendChild(canvas);
canvas.setAttribute("width", 690);
canvas.setAttribute("height", 200);
if (_ieUnder9Check()) {
    canvas = G_vmlCanvasManager.initElement(canvas);
}

//wait for the element to be displayed to get the correct clientWidth & clientHeight (used to calculate the width, height //of the canvas, otherwise, you will not see the canvas at all
setTimeout(function() {
    var myNewChart = new Chart(canvas.getContext("2d")).Bar(chartData, chartOptions);
}, 200);

Hope that help!

[fulldecent]

Following up here.

If this is still an issue, may we ask for a JSBIN test case for IE.

Thank you

[brianlow]

I was unable to get IE8 working.

Canvas element
http://jsbin.com/muqayu/1/edit
Invalid argument: excanvas.js, line 154, character 11: el.style.width = attrs.width.nodeValue + 'px';

Dynamically create canvas in javascript
http://jsbin.com/geluwizaratu/1/edit
Object doesn't support this property: Chart.min.js, line 10 character 120072: e=this.ctx.measureText(this.xLabels[0]).width

Also tried with the version of excanvas used on the flotcharts website (couldn't find excanvas bundled/used with chart.js as mentioned in these comments)
http://jsbin.com/wumakegeyavu/1/edit
No errors. Draws x-axis labels and grid line but not the dataset line.

[brianlow]

IE8 does not support rgba() colors. However changing the above JSBins to named colors didn't fix.

[nnnick]

@brianlow make sure you're using the latest version of excanvas from here: https://code.google.com/p/explorercanvas/source/browse/excanvas.js rather than the latest tagged release as there have been plenty of fixes since then.

[brianlow]

@nnnick good point, do you know how to use the latest in JSBIN? Linking directly to the raw version on google code doesn't work.

[mattbit]

You can link this: https://explorercanvas.googlecode.com/git/excanvas.js

[lynndylanhurley]

I got this working and simplified the steps into a bower package:
https://github.com/lynndylanhurley/chartjs-deps-legacy

It works for me, hopefully it can be of use to others as well.

[fulldecent]

Appears to be resolved, closing. Please reopen if this is not resolved.

[tonedef]

Not sure why excanvas straight from google (what's linked above) did not work for me, but going into the older releases for Chart.js (https://github.com/nnnick/Chart.js/releases/tag/v0.2.0) and pulling excanvas from there seems to work. BTW, awesome work, these charts are sweet!

[bvacchiano]

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>

[etimberg]

@bvacchiano that's great. Do you think something like that should be in the official docs?

[bvacchiano]

@etimberg - yeah definitely worth mentioning. Right now the docs just state that you can use the library anywhere that the <canvas> html tag can be used. I think the docs could be expanded upon a little to include how to get <canvas> working for legacy browsers like IE8. Let me know if I can help out writing the docs on this. Would be happy to.

[etimberg]

@bvacchiano We'd love help with the docs on this. The docs folder has markdown files that are used to generate the doc portion of the site. Once any changes are in, I can get @nnnick to deploy them up to the site.

[qwirkcreative]

@etimberg @bvacchiano Any chance you can offer a https://jsfiddle.net/ showing it working? Or perhaps confirm your fix works with the latest version of Chart.js? I've applied your fix exactly as described, along with trying several other fix suggestions, and but had no luck with anything. HELP!

[rockallite]

Here's a well-commented Chart.js example that works with IE8. Some code are shamelessly stolen from @bvacchiano.

I noticed that only excanvas.js and Chart.js 1.x are needed, at lease in the following example. Polyfill or html5shim are not necessary, but it won't hurt if you add them.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Chart.js IE8 Demo</title>
</head>
<body>
  <!-- Chart container -->
  <div id="myCanvas"></div>

  <!-- excanvas.js is necessary for IE8 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/excanvas.js"></script>

  <!--
    Use Chart.js 1.x only! IE8 support is dropped in version 2.x
    1.x Documentation: https://github.com/chartjs/Chart.js/tree/v1.1.1/docs
  -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>

  <script>
  // Helper function for creating a usable canvas for IE8.
  function createCanvas(width, height) {
    // Dynamically create the canvas element
    var c = document.createElement('canvas');
    // Define width and height of the canvas, or else IE8 complains
    c.width = width;
    c.height = height;
    // getContext() is not defined on canvas in IE8, so use excanvas.js to bootstrap the canvas
    if (!c.getContext) {
      c = G_vmlCanvasManager.initElement(c);
    }
    return c;
  }

  (function() {
    var lineData = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
        {
          label: "My First dataset",
          fillColor: "rgba(220,220,220,0.2)",
          strokeColor: "rgba(220,220,220,1)",
          pointColor: "rgba(220,220,220,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(220,220,220,1)",
          data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
          label: "My Second dataset",
          fillColor: "rgba(151,187,205,0.2)",
          strokeColor: "rgba(151,187,205,1)",
          pointColor: "rgba(151,187,205,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(151,187,205,1)",
          data: [28, 48, 40, 19, 86, 27, 90]
        }
      ]
    };
    var lineOptions = {
      animation: false  // Animations lags in IE8 :(
    };

    var elm = document.getElementById("myCanvas");
    var cnvs = createCanvas(600, 450);
    elm.appendChild(cnvs);  // Attach canvas to the DOM
    var ctx = cnvs.getContext('2d');
    new Chart(ctx).Line(lineData, lineOptions);
  })();
  </script>
</body>
</html>

Some useful links:

• Lazyload excanvas.js (call G_vmlCanvasManager.init_(document) after lazy-loading the script)

[WhitecastlePT]

So i did everything what @bvacchiano said and i had to include some more prototypes functions.

Array.prototype.reduce
Array.prototype.map

I'm using 2.1.2 like she did and i am assuming here...

/*!

• Chart.js
• http://chartjs.org/
• Version: 2.1.2
  *
• Copyright 2016 Nick Downie
• Released under the MIT license
• https://github.com/chartjs/Chart.js/blob/master/LICENSE.md
  */

But in line 3769: i get this error that Object.defineProperty is not defined: Because IE8 does not support this. I google it and found out that you cannot define getters and setters in non DOM objects. So you cannot define in Chart object a getter for data.

Object.defineProperty(this, 'data', {
get: function() {
return this.config.data;
}
});

I actually got it working by simply comment this and add to the controller the property data:

// The main controller of a chart
Chart.Controller = function(instance) {

    this.chart = instance;
    this.config = instance.config;
    this.options = this.config.options = helpers.configMerge(Chart.defaults.global,   Chart.defaults[this.config.type], this.config.options || {});
    this.id = helpers.uid();
    this.data = this.config.data; <--- ADDED THIS

    /*Object.defineProperty(this, 'data', {
        get: function() {
            return this.config.data;
        }
    });*/

So for future reference for people desperate to make this work in IE8 version 2.1.2 and btw i do know that you shoulnt change the API here is my environment.

Jquery 1.7 ( I know don't ask )

Included files in this order ( Important ):

$.import_js('Js/moment/moment.js'); <-- Because Chart 2.x uses this btw i not using chart bundle ( important ) - http://momentjs.com/
$.import_js('Js/chart/excanvas.js'); ( https://github.com/arv/ExplorerCanvas )
$.import_js('Js/chart/ielegacyfunctions.js'); <-- Where i put the compability functions ( Costume made for this purpose only ) - heres the file -> https://drive.google.com/file/d/0BwuW9dMO692cbld2NllNdlYyZlE/view?usp=sharing
$.import_js('Js/chart/chartjs-deps-legacy.js'); --> ( https://github.com/lynndylanhurley/chartjs-deps-legacy )
$.import_js('Js/chart/Chart.js'); <- 2.1.2

Legends in bars will not apear.... but i actually do not need them.
Tested in Chrome and IE Edge but renders in IE8