Problem with multiple charts in different tabs

Hi!

I’m using bootstrap for the layout and drawing multiple chats in different tabs:

<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#chart1" role="tab" data-toggle="tab">Chart 1</a></li>
  <li><a href="#chart2" role="tab" data-toggle="tab">Chart 2</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="chart1">
    <canvas id="myChart1" width="400" height="400"></canvas>
  </div>
  <div class="tab-pane" id="chart2">
    <canvas id="myChart2" width="400" height="400"></canvas>
  </div>
</div>

With the following javascript:

$(function() {
    'use strict';

    var line_chart_options = {
        scaleGridLineColor : "rgba(0,0,0,.05)"
    };
    var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
    var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.2)",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
                label: "My Second dataset",
                fillColor: "rgba(151,187,205,0.2)",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 86, 27, 90]
            }
        ]
    };
    var ctx = $("#myChart1").get(0).getContext("2d");
    var myLineChart1 = new Chart(ctx).Line(data, line_chart_options);

    var ctx = $("#myChart2").get(0).getContext("2d");
    var myLineChart1 = new Chart(ctx).Line(data, line_chart_options);
});

But when I add responsive: true option

    var line_chart_options = {
        scaleGridLineColor : "rgba(0,0,0,.05)",
        responsive: true
    }

it stops showing a chart in the second tab.

Is there any way to get it to work?

Thank you in advance!

[renatodeleao]

No success with previous solutions and workarounds. No destroy(), rebuild(), clear(), redraw(), resize(), update(); reAnything() has save me. This ugly hack is the only thing that is working for me:

//dispatch event resize to trigger graph re-render
$('a[data-toggle=tab').on('shown.bs.tab', function (e) {
  window.dispatchEvent(new Event('resize'));   
});

[benogle]

I have this problem if I try to render in a parent with negative margins (even when not the direct parent, and only when < -10px 🙄 ). Seems like the width is getting calculated to 0 for the canvas, but the internal chart state (chart.chart) thinks it has the correct size. So when you run chart.resize() it kicks out early.

I am able to force a resize by doing this immediately after chart creation:

chart.chart.width = 0
chart.resize()