Can't make chart js responsive

问题

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.

回答1:

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)

回答2:

Bootstrap has an example page, which has a chart (using chartjs) that is responsive. So, I would point to that URL, which can be downloaded and we have a responsive chart.

Dasbhoard Example showing Reponsive Chart

回答3:

As I saw in fiddle, you have given fixed height and width to canvas tag.

Try to give both height and width 70% or 80% for canvas tag. This may solve your problem.

100% may be give full large charts bt try to limit them to 70 to 80.

回答4:

You can make the container divs responsive using CSS and make svg width: 100% and height:100%

Here is updated fiddle fiddle.net

回答5:

I know this is an old post, but recently came across it.

Please check https://www.chartjs.org/docs/latest/general/responsive.html#important-note

It basically says that,

Detecting when the canvas size changes can not be done directly from the canvas element. Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size".
Note that in order for the above code to correctly resize the chart height, the maintainAspectRatio option must also be set to false."

For Example,

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

回答6:

I had a similar situation and based on chartjs documentation I had to add responsive: true in my options section, but it didn't solve my problem! Finally I noticed that parent element of canvas is flexbox! Removing that solved my problem!

P.S Official documentation says that adding some style or width/height attributes to canvas tag is invalid! Below is snippet from docs

The following examples do not work:

<canvas height="40vh" width="80vw">: invalid values, the canvas doesn't resize (example) <canvas style="height:40vh; width:80vw">: invalid behavior, the canvas is resized but becomes blurry

Hope my answer can help someone!

回答7:

I've found that with Chart.js, you need a containing div where you manipulate the css(height/width), which will help the responsiveness - but not fully. There are some constraints especially with the width, as the containing div might leave a lot of whitespace on the bottom/sides, since the canvas won't fully adjust to the containing width as a percentage. It isn't perfect, but it works.

So, as a solution: Make a containing div for each chart, and place it using CSS styles for this div :)

回答8:

Because of can't use media queries to set width and height, I set width and height attribute by detect mobile or desktop, like below

HTML

<canvas id="chart" width="{{width}}" height="{{height}}"></canvas>

javascript - angularjs

$scope.width = '';
$scope.height = '120';
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
   $scope.width = '100';
   $scope.height = '100';
}

回答9:

Instead of giving height and width attribute, set them through style:

Instead of

<canvas id="myChart" width="400" height="100"></canvas>

Do this

<canvas id="myChart" style="height: 20rem"></canvas>

来源：https://stackoverflow.com/questions/42340342/cant-make-chart-js-responsive

标签

javascript

chart.js

responsive