[Chartjs]-Chart.js not showing on second tab

by

4👍

✅

What you suspect is happening is correct. There are 2 options to fix this (note…option 2 is the easiest).

1) Use the shown.bs.tab event callback to either create your other chart, or if you created earlier in your javascript you can just call it’s .update() function.

$('a[href="#pie"]').on('shown.bs.tab', function(){
  myPie.update();
});

2) Put your <canvas> element inside a <div> within your tab. With this approach you don’t have to use the tab events at all. Here is an example demonstrating this.

4👍

I use maintainAspectRatio: false and I fixed this issue by applying a note on chartjs documentation. Put the canvas into div container with style dimension attributes.

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

1👍

The marked answer did not work for me since I use maintainAspectRatio: false to fill the full height of the screen. I was able to get it working by doing the following:

var currentWindowHeight = $(window).height()
var chartHeight = currentWindowHeight - 220

$("#my-tab").on("shown.bs.tab", function(){
    $("#mycanvasid").css("height", chartHeight);
});

Leave a comment