Canvas JS chart not displayed properly in Bootstrap tabs

Question

I'm using bootstrap tab to show monthly and weekly charts. Chart load properly in first tab when I select second tab chart don't fit into col-md-3. How to fix this error?

http://codepen.io/rajumax/pen/LGQoRN

Answer 1

CanvasJS Chart automatically sets the height and width of the chart according to container’s dimensions. If the values are not set for the container, it takes the default values.

In bootstrap, since the second tab is not displayed initially, chart takes the default values. To solve this issue, second chart is rendered when the shown.bs.tab event is fired by bootstrap.

Here is the working code for the same.

  var chart = new CanvasJS.Chart("chartContainer", {
    zoomEnabled: false,
    axisY: {
      includeZero: false,

    },
    axisX: {
      interval: 1,
      intervalType: "day",
      valueFormatString: "DD-MMM",
      labelAngle: -35,

    },
    data: [{
      type: "candlestick",
      dataPoints: [{
        x: new Date(2016, 0, 21),
        y: [35670, 35679.95, 34500.05, 34909.1]
      }, {
        x: new Date(2016, 0, 20),
        y: [36180, 36180, 34620, 35040.25]
      }, {
        x: new Date(2016, 0, 19),
        y: [36225, 36800, 35540, 36362]
      }, {
        x: new Date(2016, 0, 18),
        y: [37311, 37950, 36000, 36193.2]
      }, {
        x: new Date(2016, 0, 15),
        y: [38300, 38480, 37500, 37688.05]
      }, ]
    }]
  });
  chart.render();

  function ct1() {

    var chart1 = new CanvasJS.Chart("chartContainer1", {

      zoomEnabled: false,
      axisY: {
        includeZero: false,

      },
      axisX: {
        interval: 1,
        intervalType: "day",
        valueFormatString: "DD-MMM",
        labelAngle: -35,

      },
      data: [{
        type: "candlestick",
        dataPoints: [{
          x: new Date(2016, 0, 21),
          y: [35670, 35679.95, 34500.05, 34909.1]
        }, {
          x: new Date(2016, 0, 20),
          y: [36180, 36180, 34620, 35040.25]
        }, {
          x: new Date(2016, 0, 19),
          y: [36225, 36800, 35540, 36362]
        }, {
          x: new Date(2016, 0, 18),
          y: [37311, 37950, 36000, 36193.2]
        }, {
          x: new Date(2016, 0, 15),
          y: [38300, 38480, 37500, 37688.05]
        }, ]
      }]
    });
    chart1.render();
  }

  $('#bs-tab2').on("shown.bs.tab", function() {
    ct1();
    $('#bs-tab2').off(); //to remove the binded event after initial rendering
  });

.container {
  background: #ccc
}

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="col-md-3">
    <ul class="nav nav-pills nav-jt">
      <li class="active"><a data-toggle="tab" href="#tab1">Week</a>
      </li>
      <li><a data-toggle="tab" id="bs-tab2" href="#tab2">Month</a>
      </li>
    </ul>
    <div class="tab-content">
      <div id="tab1" class="tab-pane fade active in">
        <div id="chartContainer" style="height: 300px; width: 100%;"></div>
      </div>
      <div id="tab2" class="tab-pane">
        <div id="chartContainer1" style=" height: 300px; width: 100%;"></div>
      </div>
    </div>
  </div>
</div>