I want to show a chart in a bootstrap modal. Codes here: but it doesn't work, chart not display. How to fix that?

<div id="myModel" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div id="chart1" style="height:300px; width:600px;"></div>

</div><!-- /.modal -->

<script class="code" type="text/javascript">
$(document).ready(function(){
  var line1=[['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84];
  var plot1 = $.jqplot('chart1', [line1], {
      title:'Data Point Highlighting',
      axes:{
        xaxis:{
          renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{
            formatString:'%b&nbsp;%#d'
          } 
        },
        yaxis:{
          tickOptions:{
            formatString:'$%.2f'
            }
        }
  });
  $('#myModal').bind('shown',function() {
    plot1.replot();
  });
});
</script>

#button type="button" class="btn btn-primary btn-lg active" data-toggle="modal" data-target="#myModel">Draw

I want to show a chart in a bootstrap modal. Codes here: but it doesn't work, chart not display. How to fix that?

<div id="myModel" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div id="chart1" style="height:300px; width:600px;"></div>

</div><!-- /.modal -->

<script class="code" type="text/javascript">
$(document).ready(function(){
  var line1=[['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84];
  var plot1 = $.jqplot('chart1', [line1], {
      title:'Data Point Highlighting',
      axes:{
        xaxis:{
          renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{
            formatString:'%b&nbsp;%#d'
          } 
        },
        yaxis:{
          tickOptions:{
            formatString:'$%.2f'
            }
        }
  });
  $('#myModal').bind('shown',function() {
    plot1.replot();
  });
});
</script>

#button type="button" class="btn btn-primary btn-lg active" data-toggle="modal" data-target="#myModel">Draw

• javascript
• jquery
• twitter-bootstrap
• bootstrap-modal

• Could you please add this into a JS fiddle so that I can change it around? – nahtnam Commented Dec 1, 2013 at 4:49

3 Answers 3

you must show char after showing compelete modal box

In bootstrap 3 :

$('#myModal').on('shown.bs.modal', function (e) {
  var plot1 = $.jqplot('chart1', [line1], {
    title:'Data Point Highlighting',
    axes:{
      xaxis:{
        renderer:$.jqplot.DateAxisRenderer,
        tickOptions:{
          formatString:'%b %#d'
        } 
      },
      yaxis:{
        tickOptions:{
          formatString:'$%.2f'
        }
      }
    });              
});

try draw chart after modal like this:

$('#myModal').modal();
// and then
$('#myModal').on('shown.bs.modal', function (e) {
  plot1.replot();
  //...

I know this is a very dated question, however I ran into a similar issue recently using react, react-bootstrap and chartjs - never had an issue until attempting to render a chart within a modal. If you're having a similar issue and are using react with bootstrap and the react-bootstrap library, there is an onEntered event one can use. For my scenario, conditionally rendering the chart, using state that is updated when the callback for isEntered is invoked, solved the problem nicely.

If a code snippet would help anyone, please lmk.

Docs for react-bootstrap component library modal: https://react-bootstrap.github.io/components/modal/#api