IE10 Canvas width/height resolving to 0

[carmat]

I have an issue where my charts display as expected in all browsers except IE10, whereby the canvas width and height are set to 0.

Notes:

• There are no "browser support" notes anywhere in the repo (or they are incredibly difficult to find)
• Changing this in Dev Tools to arbitrary values has no effect
• Width and height cannot seem to be passed into the chart settings, which is understandable if the charts should be responsive

Issue:

At the same viewport width in other browsers, the canvas resolves as follows:

<canvas id="assets" class="chart" height="575" width="1150" style="width: 575px; height: 287.5px;"></canvas>

Code sample:

<div class="doughnut_chart chart__data" data-id="assets">
    <!-- "foreach" loop to provide the data to use -->
        <div class="chart__item">
            <div class="chart__label"><!-- label --></div>
            <div class="chart__value"><!-- value --></div>
        </div>
    <!-- end "foreach" loop -->
</div>
<canvas id="assets" class="chart"></canvas>

var charts = [];

(function(){
    $('.doughnut_chart').each(function(){
        var itemLabel, itemValue,
            labels = [], data = [],
            chartData = {}, chartDataSet = [],
            chartOptions = {},
            chartColors = [ "#8BD18C", "#75D4EA", "#FC9F86", "#9E9E9E", "#000a8b", "#d72a30" ]
            chart = document.getElementById( $(this).data('id') ),
            ctx = chart.getContext('2d'),
            mobileViewport = $(window).width() < 840;

        $(this).find('.chart__item').each(function(index) {
            itemLabel = $(this).find('.chart__label').html();
            itemValue = $(this).find('.chart__value').html();

            chartDataSet.push({
                fillColor: chartColors[index],
                data: [itemValue],
                title: itemLabel + ', ' + itemValue + '%'
            });
        });

        chartData = {
            labels: labels,
            datasets: chartDataSet
        };
        chartOptions = {
            spaceTop: 0,
            spaceRight: 0,
            spaceBottom: 0,
            spaceLeft: 0,
            responsive: true,
            responsiveWindowInitialWidth: true,
            annotateDisplay: true,
            footNoteFontSize: 0,
            percentageInnerCutout: 60,
            legend: true,
            legendSpaceLeftText: 40,
            legendBorders: false,
            legendBlockSize: 12,
            legendFontColor: '#424242',
            legendSpaceBetweenBoxAndText: 10,
            legendPosX: mobileViewport ? 0 : 4,
            legendPosY: mobileViewport ? 0 : 1,
        }

        myChart = new Chart(ctx).Doughnut(chartData, chartOptions);

        charts.push(myChart);
    });
})();

Would you be able to provide some assistance, or at least point me in the direction of some settings I'm maybe missing to resolve this issue?

[FVANCOP]

Hi,

I'm a bit surprised that it works without having defined the dimensions of your canvas (I had never tested this before). But, yes, it seems to work...

Some browsers have problems with commas with nothing behind. So, on line "legendPosY: mobileViewport ? 0 : 1," I would remove the comma. Perhaps that would solve the problem.

Otherwise, can you send your code to my email address (I'm not familiar with JQUERY) ?

Regards, François

[carmat]

• [x] Trailing commas removed
• [x] width and height added to each canvas in the markup

Still not displaying the canvas charts in IE10, the width and height attributes on the canvas are still being set to 0;

[FVANCOP]

Code not yet received on my email address.

[carmat]

That is the code as posted above.

[FVANCOP]

I can help, but I need a FULL functionning HTML file with all the code ... I have no experience with JQuery (I think that your code integrates JQUERY or something similar)