Question

89

Can't make chart js responsive

rated 0 times [ 93] [ 4] / answers: 1 / hits: 76159 / 7 Years ago, mon, february 20, 2017, 12:00:00

sorry if I missed anything to fix my issue, I've read and tried many solutions without any of them being adapted to the problem.

I have several charts (from chart.js) on a single page, but I can't succeed to make them responsive, despite :

responsive: true,

The best responsive display I could get was when enlarging canvas width and height, but on the desktop version charts were displayed the entire screen.

Here is a fiddle.net

Anybody to help me ? Thank you very much.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ashly

Add To Favorites

Follow

Total Points: 601

Total Questions: 95

Total Answers: 88

Location: Saint Vincent and the Grenadines

Member since Thu, Oct 15, 2020

4 Years ago

answered 7 Years ago dominickmackenziet · Accepted Answer

The answer is :

1. add a div around the canvas

for example :

<div class=wrapper>

    <canvas width=600 height=250></canvas>

</div>

2. add height to the div class in the css

.wrapper {

height: 500px !important;

}

(adjust height as you wish the responsive rendering)