Home/ Questions/Q 8967309
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T17:12:50+00:00

I have a bar chart (jqplot). How do I make it fill out the

  • 0

I have a bar chart (jqplot). How do I make it fill out the entire screen regardless of screen resolution? Like this one: https://www.desmos.com/calculator . It automatically resizes the chart when the window is changed.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What worked for me was this (adapted from http://www.jqplot.com/deploy/dist/examples/area.html):

    <!DOCTYPE html>
<html>
<head>    
    <title>Filled (Area) Charts</title>

    <script class="include" type="text/javascript" src="../jquery.min.js"></script>
    <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
    <script class="include" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>

    <script language="javascript" type="text/javascript">
        $(document).ready(function(){
            var l2 = [11, 9, 5, 12, 14];
            var l3 = [4, 8, 5, 3, 6];
            var l4 = [12, 6, 13, 11, 2]; 

            var plot = $.jqplot('chart1b',[l2, l3, l4],{
               stackSeries: true,
               showMarker: false,
               seriesDefaults: {
                   fill: true
               },
               axes: {
                   xaxis: {
                       renderer: $.jqplot.CategoryAxisRenderer,
                       ticks: ["Mon", "Tue", "Wed", "Thr", "Fri"]
                   }
               }
            });

            resizePlot(plot);

            $(window).bind('resize', function(event, ui) {
                resizePlot(plot);
            });
        });

        function resizePlot($plot) {
            $($plot.targetId).height($(window).height() * 0.75);
            $plot.replot( { resetAxes: true } );
        }
    </script>
</head>
<body>
    <div class="example-content">
        <div id="chart1b"></div>
    </div>
</body>
</html>

    The key is to bind a handler to the resize event of the window. With this you can get the size of the window and in turn modify the height of the plot container. We need to modify the height this way because the resize event only seemed to affect the width of the plot.

    My example here sets the plot to be 75% of the height of the window – you will need to adjust this to suit your requirements.

    • 0