Posted in Uncategorized

Responsive chart and legend on small devices

   February 24, 2021  3 Comments on Responsive chart and legend on small devices

Hello

I’ve done a stacked chart with 4 informations.
It workd really good on all devices (responsive:true)

But on reallly small screens (phone, …) the legend take 4 lines and then more than 2/3 of the canvas size and let a really little place for the chart itself

On big screens… image

and on small screens… image

I did not find any option to hide the legend for small screens (like the bootstrap ‘hidden-xs’)
Could it be a new improvement for next Chart.js v2.1 ?

Thanks
Dergonic

Author: Fantashit

3 thoughts on “Responsive chart and legend on small devices”

  1. Yes, this is an alternative idea
    That’s what I’ve done

    For those who are interested in here is one solution (but sure not the best 😀 )

    var resizeId;
        $(window).resize(function() {
            clearTimeout(resizeId);
            resizeId = setTimeout(afterResizing, 100);
        });


        function afterResizing(){
            var canvasheight=document.getElementById("canvas1").height;
            if(canvasheight <=250)
            {
                window.chart1.options.legend.display=false;
            }
            else
            {
                window.chart1.options.legend.display=true;
            }
            window.chart1.update();
        }```

  2. Hello again,

    I found how to get what I wanted 🙂

    In responsive mode, height remains the same, only the width is modified.

    I set the following options :
    { responsive: true, maintainAspectRatio: false, [...] }

    I added a div around the canvas :

    <div class="chart-container">
    <canvas id="chart-my-clients-activity" width="400" height="150"></canvas>
</div>

    And I control the div’s height .chart-container in CSS with media queries.

    It’s perfect 🙂

  3. Just wanted to say thank you to @mlegait for their fix. It’s most definitely not fixed in the latest versions, so this is still required to not squash them on mobile.

Comments are closed.