Chart.js: Responsive chart and legend on small devices

[Dergonic]

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...

and on small screens...

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

[etimberg]

@Dergonic I'm adding this as an enhancement. As a work around you could detect when the canvas is small and then hide the legend manually.

[Dergonic]

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 :D )

`````` javascript
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();
    }```

``````

[etimberg]

I think we can also expose the internal resize event without too much trouble. That way it would be possible to handle this when the div containing the chart resizes by binding your own resize listener onto the chart object.

Some other thoughts on how to handle this:

• when the chart resizes, and after the new size is determined, call a callback that allows changing the options.

[mlegait]

Hello all,

Is it possible to do the same as HighCharts ? In responsive mode, height remains the same, only the width is modified. And the result is pretty good. You can try here : http://www.highcharts.com/demo/column-placement

Thank you for your great work :-)

[mlegait]

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 :-)

[etimberg]

Thanks for posting your solution @mlegait

[etimberg]

Fixed in #3650

[LiamDawe]

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.

[asimgulzarjan]

@Dergonic where exactly do i place this. kindly give the complete script iam new with .js

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();
    }```