jqplot resize chart when resizing browser

hacket picture hacket · Jul 20, 2012 · Viewed 15.2k times · Source

Is there an easy way to auto-resize a jqplot chart when resizing the browser? I have been looking on Google, and haven't found anything.

Answer

Mark picture Mark · Jul 21, 2012

Resizing jqplots is discussed here.

To make it work when the browser is resized, bind the replot function up with the window.resize event:

$(window).resize(function() {
      plot1.replot( { resetAxes: true } );
});

Running code:

$(document).ready(function(){
    var plot1 = $.jqplot ('container', [[3,7,9,1,4,6,8,2,5]], {});
    
    $(window).resize(function() {
          plot1.replot( { resetAxes: true } );
    });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css">
     
<div id="container"></div>