Chart.js render in hidden Bootsrap tab

Question

this is driving me mad, I am using Chart.js in my bootstrap tabs but they will not render because the width is set to zero when the DOM is loaded. I finally found this out after trying and figuring out why my graph was not there!

I've searched online and nothing seemed to fix my issue, can anybody please help me with this, I think I need some script that renders the graph when the tab is selected and succesfully loaded Im using this JS:

var data = [
{
    value: 300,
    color:"#F7464A",
    highlight: "#FF5A5E",
    label: "Red"
},
{
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green"
},
{
    value: 100,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Yellow"
}
];
var options = {
   responsive : true,
   animation: true,
};

var ctx1 = $("#invest-chart").get(0).getContext("2d");
var invest_chart;
new Chart(ctx1).Doughnut(data,  {
   responsive : true,
   animation: true,
});

Along with this html piece in my tab:

<canvas id="invest-chart"></canvas>

Thanks guys!

http://stackoverflow.com/questions/29395853/chart-js-in-angularjs-tabset-does-not-render?rq=1 — mccainz, Apr 22 '15 at 19:20
I'm not familiar with `chart.js` and its functions, but there should be a way to render the chart when the tab is shown, using bootstrap's `shown.bs.tab` function: http://getbootstrap.com/javascript/#tabs — Tim Lewis, Apr 22 '15 at 19:40

score 10 · Accepted Answer · answered Apr 22 '15 at 21:04

You need to call the chart after the tab is shown. Bootstrap provides events on their javascript plugins that you can watch for with a jquery on event.

$('a[href=#chart]').on('shown.bs.tab', function(){
  var data = [
  {
    value: 300,
    color:"#F7464A",
    highlight: "#FF5A5E",
    label: "Red"
  },
  {
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green"
  },
  {
    value: 100,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Yellow"
  }
 ];
 var options = {
   responsive : true,
   animation: true,
 };
 var ctx1 = $("#invest-chart").get(0).getContext("2d");
 var invest_chart;
 new Chart(ctx1).Doughnut(data,  {
   responsive : true,
   animation: true,
 });
});

http://codepen.io/anon/pen/bdGrKv

Thanks! wasn't even aware of that function! Thanks for the help and codepen! — Boris Kamp, Apr 23 '15 at 20:19
Hi @evilrobotz i have more than 3 tabs and in a each tab having chart . So how to solv that problem — Abhay Singh, Dec 04 '15 at 11:33

score 1 · Answer 2 · answered Jan 03 '20 at 16:57

1

In my case, I found a class named "fade" with conflict with bootstrap one with same name. My solution was rename my css class to "MyFade".

answered Jan 03 '20 at 16:57

LÚSAR

11
2

Chart.js render in hidden Bootsrap tab

2 Answers2