Charts not showing in IE9 or IE10 v2.x

[ausrussell]

Just for the v2 dev version using ie9 I'm not seeing the charts drawn into the canvas element (I tried line and bar charts). I tried tracking down where the issue is occurring without success.

I'm also seeing the issue in IE10... I'm using the sample files.

Am I doing something wrong or is this a known issue?

[sinneren]

In 8,9 & 10 doesn't work too.

[ausrussell]

Ok then, I'm going hunting for the bug.

Wish me luck or even better give me some ideas about what might be wrong... anyone?

[sinneren]

Just can wish U luck.

[cesar-tonnoir]

I have the same issue with Safari 9: charts are not showing on first page load. They are showing if I delete/re-create the canvas later in the script.

[andi-b]

I've found the issue - the canvas width and height is being set to 0 - resizing on-the-fly fixes the issue.

[byCedric]

andi-b, will try it out asap! if it works, you are my hero.

[etimberg]

@andi-b if you have a fix for this, I'd be happy to merge a fix.

[andi-b]

It looks likely to be something within this code that's causing the issue:

// Support a jQuery'd canvas element
        if (context.length && context[0].getContext) {
            context = context[0];
        }

        // Support a canvas domnode
        if (context.getContext) {
            context = context.getContext("2d");
        }

        this.ctx = context;
        this.canvas = context.canvas;

        // Figure out what the size of the chart will be.
        // If the canvas has a specified width and height, we use those else
        // we look to see if the canvas node has a CSS width and height. 
        // If there is still no height, fill the parent container
        this.width = context.canvas.width || parseInt(Chart.helpers.getStyle(context.canvas, 'width')) || Chart.helpers.getMaximumWidth(context.canvas);
        this.height = context.canvas.height || parseInt(Chart.helpers.getStyle(context.canvas, 'height')) || Chart.helpers.getMaximumHeight(context.canvas);

[andi-b]

Thought I was getting closer with the resize function, but data appears to be the same. The difference I'm getting with the HTML:

Firefox:

IE9:

[etimberg]

@andi-b try investigating the resize code

[andi-b]

I've spent quite a lot of time on this and didn't get very far, but have found a workaround (although may not work with responsive) that may help others figure out what's happening. My workaround:

var ctx = document.getElementById("bar_chart").getContext("2d");

var canvasWidth= parseInt(document.getElementById("bar_chart").width);
var canvasHeight= parseInt(document.getElementById("bar_chart").height);

window.myBar = Chart.Bar(ctx, {
            data: chartData,
            options: {...  
            }
 });

myBar.chart.canvas.height = canvasHeight;  
myBar.chart.canvas.width = canvasWidth;

[byCedric]

Yes I've got something similar working too. Fortunately we need to fix this asap for a client, so I will try to get some work done for a pull request. I will look into the responsive part too, since we use that also.

@andi-b thanks for pointing out the problematic part!

[byCedric]

Thanks for merging this @etimberg! Hope this fixes this issue for all of you. I tested this fix on windows 7 using VirtualBox, IE9 and IE10, using modern.ie. Let me know if this issue still exists, it's important for us (client and company) this works. :)

[andi-b]

@byCedric This update doesn't appear to have worked for me - I'm using IE11, emulating to IE9 and IE10.

I see the work has been done in the core.helpers.js in the retina function: Do I need to include this file or is this already included within chartjs? And do I need to 'switch on' the option to have it work with Retina displays in order for this fix to work?

Many thanks

[byCedric]

@andi-b Did you tried to recompile or rebuild the main Chart.js file?

I did change some code in the helpers.core.js, that was the part that multiplied by 0 on old browsers. What resulted in the width="0" height="0" issue you described. You don't have to change anything within your configurations since the retina calculations are always executed. Unfortunately, if you want to have this fix straight out of the box you have to wait... Wait until the main Chart.js and Chart.min.js are rebuild in this repository. I have no clue when this will happen or when a next release is due.

But to do this manually, you have two options. You can clone this repository and rebuild it yourself. When doing this you have control over your own Chart.js file and you can rebuild whenever you would like. This will look like the code below inside your package.json

{
    "dependencies": {
        "chart.js": "<github name>/<repo name>#v2.0-dev"
    }
}

e.g. "chart.js": "byCedric/Chart.js#v2.0-dev"

The second option is to add a script to NPM (your own package.json) that actually compiles the library from the original repository. I recommend to add the whole command as a script, so you don't have to type it every time. The script will be something like this.

{
    "scripts": {
        "build-chartjs": "cd ./node_modules/chart.js/ && npm install && ./node_modules/gulp/bin/gulp.js build && cd ../.."
    }
}

call it like this $ npm run build-chartjs, and/or add it to the postinstall callback.

Personally I recommend to use the second option, until the main Chart.js is rebuild within this repo. With the second option you also get all future bugfixes. Let me know, by DM, if this also doesn't work for you.

[etimberg]

Closing as #1690 was merged. An updated build with this change is available in the v2.0-dev branch.