How to make Canvas JS chart responsive in tab?

Question

Hi i have two bootstrap tabs in which in the second tab i am displaying a canvas js line chart. The chart doesn't cover the whole screen until the height and width is set in the canvas js chart itself which break the responsivenes. The chart getting displayed without height and width in chart :-

The code for the tabs:-

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#s1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#s2" data-toggle="tab">Tab 2</a></li>
    </ul>

    <div class="panel panel-flat">
        <div class="panel-body">
           <div class="tab-content">
               <div class="tab-pane" id="s1">
                   <div class="row">
                       <div class="col-md-12">
                             A table is shown in first tab  
                       </div>
                   <div>                       
                </div>

                <div class="tab-pane" id="s2">
                    <div class="row">
                        <div class="col-md-12">
                            <div id="chartContainer" style="height: 365px !important; width: 100% !important;"></div>  
                        </div>
                    <div>                       
                </div>
           </div>
        <div>                       
     </div>
  </div>

The javascript for the chart:-

<script type="text/javascript">
window.onload = function () {

    var chart = new CanvasJS.Chart("chartContainer",
    {

        title:{

        },
        animationEnabled: true,
        axisX:{

            gridColor: "Silver",
            tickColor: "silver",
           interval: 1

        },                        
                    toolTip:{
                      shared:true
                    },
        theme: "theme2",
        axisY: {
            gridColor: "Silver",
            tickColor: "silver"
        },
        legend:{
            verticalAlign: "center",
            horizontalAlign: "right"
        },

        data: [
        {        
            type: "line",
            markerType: "square",
            color: "#F08080",
            dataPoints: [
            { x: 1, y: 6.7 },
            { x: 2, y: 8.0 },
            { x: 3, y: 7.10 },
            { x: 4, y: 8.58 },
            { x: 5, y: 9.34 },
            { x: 6, y: 6.63 },
            { x: 7, y:7.47 },
            { x: 8, y: 8.53 },

            ]
        }
        ],
        });

      chart.render();
        }
    </script>

I would be highly grateful if anybody can help me in making the chart appear in full width in the tab without setting the height and width in chart itself. Any help is highly appreciated.

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 should be rendered when the shown.bs.tab event is fired by bootstrap.

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

Check this jsfiddle.