[Chartjs]-Chart.js – Responsiveness not correctly working on device orientation change

by

2👍

✅

Listen for the orientation change event (in jQuery mobile – $(window).on("orientationchange",function(){ ... });) and trigger a window resize (if you have jQuery this could be as simple as $(window).trigger('resize');

Alternatively, you could replicate the code that executes when the window is resized in the orientation change handler

function () {
    // Basic debounce of resize function so it doesn't hurt performance when resizing browser.
    var timeout;
    return function () {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            Chart.helpers.each(Chart.instances, function (instance) {
                // If the responsive flag is set in the chart instance config
                // Cascade the resize event down to the chart.
                if (instance.options.responsive) {
                    instance.resize(instance.render, true);
                }
            });
        }, 50);
    };
};

Which is mostly a copy paste of the Chart.js library code, except that I replaced each with Chart.helpers.each

0👍

I had the similar problem with mobile gadgets in the different orientation. It was solved using CSS styles. Eg.:

@media (orientation:portrait) {
 .chart-container {
   min-height: 40vh;
 }
}

@media (orientation:landscape) {
 .chart-container {
   min-height: 90vh;
 }
}

Leave a comment