CODEWITHSUNDEEP
javascriptchart.jsresponsive
Blue Agency
Blue Agency

Reputation: 656

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.

Upvotes: 31

Views: 96243

Answers (14)

Oscar Sanchesto
Oscar Sanchesto

Reputation: 11

I had the same issue with responsive charts (chartjs pie chart) and found this solution:

<div class="justify-content-center pieChart">

    <canvas id="productivityPieChart"></canvas>

</div>

<style>

.pieChart {
  position: relative;
  max-height: 650px;
  max-width: 650px;
  margin: 0 auto;
  text-align: center;
}

canvas {
  width: 100% !important;
  height: auto !important;
  min-width: 250px;
  min-height: 250px
}

</style>

Upvotes: 1

attacomsian
attacomsian

Reputation: 2913

None of the Chartjs configuration options worked for me. I ended up setting the canvas width to 100%, and it worked like a charm.

.w-100 {
    width: 100% !important;
}

<canvas id="mychart" class="chart-canvas w-100"></canvas>

Upvotes: 0

Litaf Kupfer
Litaf Kupfer

Reputation: 1

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

Upvotes: 0

vishalknishad
vishalknishad

Reputation: 734

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

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

Upvotes: 2

Swaleh Matongwa
Swaleh Matongwa

Reputation: 886

maintainAspectRatio: false sorted me out on a similar problem. The default value is true.

Upvotes: 25

Hamza KOUADRI
Hamza KOUADRI

Reputation: 11

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.

Upvotes: 1

Morteza QorbanAlizade
Morteza QorbanAlizade

Reputation: 1550

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

Upvotes: 0

Divya Tewari
Divya Tewari

Reputation: 121

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>

Upvotes: 12

Gh111
Gh111

Reputation: 1452

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!

Upvotes: 6

Krishna Vedula
Krishna Vedula

Reputation: 1791

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

Upvotes: 12

Blue Agency
Blue Agency

Reputation: 656

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)

Upvotes: 17

Akash Thakkar
Akash Thakkar

Reputation: 83

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.

Upvotes: 5

Amit
Amit

Reputation: 4292

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

Here is updated fiddle fiddle.net

Upvotes: 5

cbll
cbll

Reputation: 7219

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

Upvotes: 1

Related Questions