score:17

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)

score:0

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';
}

score:0

from chart.js

responsiveness can then be achieved by setting relative values for the container size:

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

the chart can also be programmatically resized by modifying the container size: chart.canvas.parentnode.style.height = '128px';

score:1

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

score:1

i tried all what the documents said but no chance,so i managed by my self:

<section style="padding: 0px">    
 <div class="chart-container" style="position: relative; margin: auto; height:167px; width: 1492px;">
         <canvas id="graph"></canvas>
     </div>
 </section>
    <script>
    $(window).load(function() {
      $( window ).resize(function() {
         $('#graph').closest('.chart-container').css('width',$('#graph').closest('section').width());
      });
    });
    </script>

the idea here to change the width or the height or both when the window resized.

score:2

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

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

score:3

maintainaspectratio: false sorted me out on a similar problem. the default value is true.

score:4

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!

score:5

you can make the container divs responsive using css and make svg width: 100% and height:100%

here is updated fiddle fiddle.net

score:5

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.

score:8

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,

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

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

score:10

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


Related Query

More Query from same tag