Canvas js Charts not responding correctly in Bootstrap 3 Layout

Question

I am UI Developer and I am using Bootstrap 3 and Canvas Js Charts like pie chart,column chart. I have decided to place two charts in each row for desktop.And It works properly. But when I resize the browser window It doesnot stack two charts in mobile device. Rather the Pie Chart gone away only second chart only visible. Why this happen.

In Desktop Device

When I check it for mobile device. The Pie Chart Gone Away

The code here

 <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div id="pieChart">
                 <script type="text/javascript">
                                        var pieChartValues=[     
                                          {  y: 39.16,exploded: true, indexLabel: "Hello",color:"#1f77b4" },
                                          {  y: 21.8,  indexLabel: "Hi",color:"#ff7f0e" },
                                          {  y: 21.45, indexLabel: "pk",color:" #ffbb78" },
                                          {  y: 5.56, indexLabel: "one",color:"#d62728"},
                                           { y:5.38,  indexLabel: "two",color:"#98df8a"},
                                          {  y: 3.73 , indexLabel: "three",color:"#bcbd22" },
                                          {  y: 2.92, indexLabel: "four",color:"#f7b6d2"}
                                        ];
                                        renderPieChart(pieChartValues);

                                            function renderPieChart (values) {

                                      var chart = new CanvasJS.Chart("pieChart",
                                      {
                                        backgroundColor: "white",
                                        colorSet:"colorSet2",

                                        title:{
                                          text: "Pie Chart",
                                          fontFamily:"Verdana",
                                          fontSize:25,
                                          fontWeight: "normal",
                                        },
                                                    animationEnabled: true,
                                        data: [
                                        {        
                                          indexLabelFontSize: 15,
                                          indexLabelFontFamily: "Monospace",       
                                          indexLabelFontColor: "darkgrey", 
                                          indexLabelLineColor: "darkgrey",        
                                          indexLabelPlacement: "outside",
                                          type: "pie",       
                                          showInLegend: false,
                                          toolTipContent: "<strong>#percent%</strong>",
                                          dataPoints:values
                                        }
                                        ]
                                      });
                                      chart.render();
                                    }
                    </script>
                </div>
            </div>

            <div class="col-md-6">
                <div id="columnChart">
        <script type="text/javascript">

                     var columnChartValues=[      
                      {y: 686.04, label: "one",color:"#1f77b4"},
                      {y: 381.84,  label: "two",color:"#ff7f0e"},
                      {y: 375.76,  label: "three",color:" #ffbb78"},
                      {y: 97.48,  label: "four",color:"#d62728"},
                      {y: 94.2,  label: "five",color:"#98df8a"},
                      {y: 65.28,  label: "Hi",color:"#bcbd22"},
                      {y: 51.2,  label: "Hello",color:"#f7b6d2"}
                    ];
                  renderColumnChart(columnChartValues);
                  function renderColumnChart(values) {

                                    var chart = new CanvasJS.Chart("columnChart",
                                    {
                                      backgroundColor: "white",
                                      colorSet:"colorSet3",
                                      title:{
                                        text: "Column Chart",
                                        fontFamily: "Verdana",
                                        fontSize:25,
                                        fontWeight: "normal",
                                      },
                                      animationEnabled: true,
                                      legend: {
                                        verticalAlign: "bottom",
                                        horizontalAlign: "center"
                                      },
                                      theme: "theme2",
                                      data: [

                                      {
                                        indexLabelFontSize: 15,
                                        indexLabelFontFamily: "Monospace",       
                                        indexLabelFontColor: "darkgrey", 
                                        indexLabelLineColor: "darkgrey",        
                                        indexLabelPlacement: "outside",        
                                        type: "column",  
                                        showInLegend: false, 
                                        legendMarkerColor: "grey",
                                        dataPoints: values
                                      }   
                                      ]
                                    });

                                    chart.render();
                                  }
                       </script>                 
        </div>
            </div>

        </div>


    </div>

Answer 1

Bootstrap provides grid-classes to maintain responsiveness design. To explicitly set width for tablet or mobile devices, you need to add grid-classes of tablet and mobile along with desktop class.

Refer to Bootstrap-Grid for more info. And here is a link to refer to examples of Bootstrap-Grid in multiple devices like desktop, tablet and mobile devices.

Here is the working code for your issue.

var pieChartValues = [{
  y: 39.16,
  exploded: true,
  indexLabel: "Hello",
  color: "#1f77b4"
}, {
  y: 21.8,
  indexLabel: "Hi",
  color: "#ff7f0e"
}, {
  y: 21.45,
  indexLabel: "pk",
  color: " #ffbb78"
}, {
  y: 5.56,
  indexLabel: "one",
  color: "#d62728"
}, {
  y: 5.38,
  indexLabel: "two",
  color: "#98df8a"
}, {
  y: 3.73,
  indexLabel: "three",
  color: "#bcbd22"
}, {
  y: 2.92,
  indexLabel: "four",
  color: "#f7b6d2"
}];
renderPieChart(pieChartValues);

function renderPieChart(values) {

  var chart = new CanvasJS.Chart("pieChart", {
    backgroundColor: "white",
    colorSet: "colorSet2",

    title: {
      text: "Pie Chart",
      fontFamily: "Verdana",
      fontSize: 25,
      fontWeight: "normal",
    },
    animationEnabled: true,
    data: [{
      indexLabelFontSize: 15,
      indexLabelFontFamily: "Monospace",
      indexLabelFontColor: "darkgrey",
      indexLabelLineColor: "darkgrey",
      indexLabelPlacement: "outside",
      type: "pie",
      showInLegend: false,
      toolTipContent: "<strong>#percent%</strong>",
      dataPoints: values
    }]
  });
  chart.render();
}
var columnChartValues = [{
  y: 686.04,
  label: "one",
  color: "#1f77b4"
}, {
  y: 381.84,
  label: "two",
  color: "#ff7f0e"
}, {
  y: 375.76,
  label: "three",
  color: " #ffbb78"
}, {
  y: 97.48,
  label: "four",
  color: "#d62728"
}, {
  y: 94.2,
  label: "five",
  color: "#98df8a"
}, {
  y: 65.28,
  label: "Hi",
  color: "#bcbd22"
}, {
  y: 51.2,
  label: "Hello",
  color: "#f7b6d2"
}];
renderColumnChart(columnChartValues);

function renderColumnChart(values) {

  var chart = new CanvasJS.Chart("columnChart", {
    backgroundColor: "white",
    colorSet: "colorSet3",
    title: {
      text: "Column Chart",
      fontFamily: "Verdana",
      fontSize: 25,
      fontWeight: "normal",
    },
    animationEnabled: true,
    legend: {
      verticalAlign: "bottom",
      horizontalAlign: "center"
    },
    theme: "theme2",
    data: [

      {
        indexLabelFontSize: 15,
        indexLabelFontFamily: "Monospace",
        indexLabelFontColor: "darkgrey",
        indexLabelLineColor: "darkgrey",
        indexLabelPlacement: "outside",
        type: "column",
        showInLegend: false,
        legendMarkerColor: "grey",
        dataPoints: values
      }
    ]
  });

  chart.render();
}

<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-fluid">
    <div class="row">
        <div class="col-md-6">
            <div id="pieChart" style="height: 360px; width: 100%;">
            </div>
        </div>
        <div class="col-md-6">
            <div id="columnChart" style="height: 360px; width: 100%;">
            </div>
        </div>
    </div>
</div>