Leveraging Bootstrap 4 flexbox for evenly distributing four charts on a webpage

Trying to create four stacked charts in one browser window, but struggling with uneven sizes. CSS adjustments haven't worked due to lack of familiarity with HTML+CSS layout.

Any suggestions or help would be highly appreciated. Thank you!

Code provided below:

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/autocomplete-0.3.css" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        <style>
        .custom-select-lg {
            border: 2px solid #ccc;
            height: 52px;
            padding: 0 0 0 15px;
            font-size: 125%;
            width: 290px;
        }
        .vh-100 {
          min-height: 100vh;
        }

        .choose-plot {
          padding-top: 15px;
          padding-bottom: 15px;
        }

        .bordered {
          border: 1px solid #ccc;
          border-radius: 10px;
        }
        </style>
    </head>
    <body>
        <div class="container-fluid d-flex h-100 flex-column vh-100">
            <div class="row">
                <div class="col choose-plot">
                <strong class="mb-2">Instruction here</strong>
                    <div class="row">
                      <div class="col-1">
                        <button id="load_plot" class="btn btn-primary btn-lg">Load plot</button>
                      </div>
                    </div>
                </div>
            </div>

            <div class="row flex-fill d-flex justify-content-start">
                <div class="col-6 bordered">1 of 4
                    <div id="container-0" style="height: 100%;"></div>
                </div>
                <div class="col-6 bordered">2 of 4
                    <div id="container-1" style="height: 100%;"></div>
                </div>
                <div class="col-6 bordered">3 of 4
                    <div id="container-2" style="height: 100%;"></div>
                </div>
                <div class="col-6 bordered">4 of 4
                    <div id="container-3" style="height: 100%;"></div>
                </div>
            </div>
        </div>

        <script  src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
        <script src="js/echarts-4.1.0.js"></script>
        <script type="text/javascript">

        var doms = [
            document.getElementById("container-0"),
            document.getElementById("container-1"),
            document.getElementById("container-2"),
            document.getElementById("container-3"),
        ];
        var myCharts = [];
        var myOption = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {
                    type : 'shadow'
                }
            },
            legend: {
                data: ['Direct Visits', 'Email Marketing','Alliance Ads','Video Ads','Search Engine']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis:  {
                type: 'category',
                data: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'Direct Visits',
                    type: 'bar',
                    stack: 'a',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [320, 302, 301, 334, 390, 330, 320]
                },
                {
                    name: 'Email Marketing',
                    type: 'bar',
                    stack: 'a',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'Alliance Ads',
                    type: 'bar',
                    stack: 'a',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: 'Video Ads',
                    type: 'bar',
                    stack: 'a',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [150, 212, 201, 154, 190, 330, 410]
                },
                {
                    name: 'Search Engine',
                    type: 'bar',
                    stack: 'a',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [820, 832, 901, 934, 1290, 1330, 1320]
                }
            ]
        }; //myOption ends
        $('#load_plot').on('click', function() {
            if (myCharts.length != 0) {
                myCharts.forEach(function (c) {
                    c.dispose();
                });
            }
            doms.forEach(function(ele){
                var curChart = echarts.init(ele, null, {renderer: 'canvas'});
                curChart.showLoading();
                curChart.setOption(curOption = myOption);
                curChart.hideLoading();
                console.log("done loading");
                myCharts.push(curChart);

            });
        });
       </script>
   </body>
</html>
csshtmlflexboxbootstrap-4

Answer №1

To enhance the structure within .col-6.bordered, it is recommended to eliminate the inline height of 100% from the div and incorporate the subsequent style.

.col-6.bordered > div {
    height: 50vh;
}


.col-6.bordered>div {
  height: 50vh;
}
<!DOCTYPE html>
<html style="height: 100%">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <style>
    .custom-select-lg {
      border: 2px solid #ccc;
      height: 52px;
      padding: 0 0 0 15px;
      font-size: 125%;
      width: 290px;
    }
    
    .vh-100 {
      min-height: 100vh;
    }
    
    .choose-plot {
      padding-top: 15px;
      padding-bottom: 15px;
    }
    
    .bordered {
      border: 1px solid #ccc;
      border-radius: 10px;
    }
  </style>
</head>

<body>
  <div class="container-fluid d-flex h-100 flex-column vh-100">
    <div class="row">
      <div class="col choose-plot">
        <strong class="mb-2">Instruction here</strong>
        <div class="row">
          <div class="col-1">
            <button id="load_plot" class="btn btn-primary btn-lg">Load plot</button>
          </div>
        </div>
      </div>
    </div>

    <div class="row flex-fill d-flex justify-content-start">
      <div class="col-6 bordered">1 of 4
        <div id="container-0"></div>
      </div>
      <div class="col-6 bordered ">2 of 4
        <div id="container-1"></div>
      </div>
      <div class="col-6 bordered">3 of 4
        <div id="container-2"></div>
      </div>
      <div class="col-6 bordered">4 of 4
        <div id="container-3" "></div>
            </div>
</div>
</div>
<script  src="https://code.jquery.com/jquery-3.3.1.min.js " integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin=" anonymous "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js " integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9 " crossorigin="anonymous "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.js "></script>
<script>


var doms = [
    document.getElementById("container-0 "),
    document.getElementById("container-1 "),
            document.getElementById("container-2 "),
            document.getElementById("container-3 "),
        ];
var myCharts = [];
var myOption = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {
                    type : 'shadow'
                }
            },
            legend: {
                data: ['direct', 'email marketing','alliance advertising','video ads','search engine']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis:  {
                type: 'category',
                data: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'direct',
                    type: 'bar',
                    stack: 'a',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                     },
                    data: [320, 302, 301, 334, 390, 330, 320]
                },
                {
                    name: 'email marketing',
                    type: 'bar',
                    stack: 'a',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                     },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'alliance advertising',
                    type: 'bar',
                    stack: 'a',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                     },
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: 'video ads',
                    type: 'bar',
                    stack: 'a',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                     },
                    data: [150, 212, 201, 154, 190, 330, 410]
                },
                {
                    name: 'search engine',
                    type: 'bar',
                    stack: 'a',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                     },
                    data: [820, 832, 901, 934, 1290, 1330, 1320]
                }
            ]
        }; //myOption ends
$('#load_plot').on('click', function() {
            if (myCharts.length != 0) {
                myCharts.forEach(function (c) {
                    c.dispose();
                });
            }
            doms.forEach(function(ele){
                var curChart = echarts.init(ele, null, {renderer: 'canvas'});
                curChart.showLoading();
                curChart.setOption(curOption = myOption);
                curChart.hideLoading();
                console.log("done loading ");
                myCharts.push(curChart);

            });
});
  
  </script>
   </body>
</html>

View the latest demo

Answer №2

By default, the definition is min-height:1px
This means that the height will adjust automatically according to the content's height.
To specify it explicitly, you can use height: 100vh;

.bordered{
  height: 100vh;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Enhabling tablesorter pagination to ensure that buttons always stay in sync with

I am experiencing an issue with the pagination buttons staying at the bottom of my page, even when there are only 2 entries left on the last page. Check out my table here: Is there a way to make the pagination buttons dynamically move to the top based on ...

javascriptjquerycsstablesorter

Utilizing the asterisk selector in react/next.js

I'm currently in the process of building my first website using React. In my main.module.css file, I have the following CSS reset: * { padding: 0; margin: 0; box-sizing: border-box; } This is just a typical CSS styling reset. However, whe ...

cssreactjsnext.js

Customize arrow direction in AntDVue ant-collapse using simple CSS styling

Is there a way to customize the arrow directions in ant-collapse vue? I recently faced an issue where I couldn't change the arrow directions without using !important (which I try to avoid). Fortunately, we found a workaround for this problem at my wo ...

csssassvuejs2nuxt.jsantd

Unable to add a logo to the header in react-material kit

I am in the process of trying to incorporate my logo into the top header section of the page, but I am facing some challenges with the code provided. import React from "react"; import classNames from "classnames"; import PropTypes from "prop-types" ...

cssreactjsmaterial-ui

Navigating within Vue.js: Utilizing vue-router for seamlessly redirecting to targeted sections within a view identified by an ID

I am in the process of using a Home view and a Blog view. My goal is to utilize a <router-link> to transition from the Home view to a particular section within the Blog view. The specific section I am referencing appears as follows: <section id=&q ...

htmlvue.jsvue-router

Aligning images of varying sizes

I have implemented a PHP script that automatically resizes images proportionally to fit within a given height and width. For example, if the original picture is 200x100px and the target box is 180x180px, the resized image will be 180x90px. Although this s ...

csshtmlimagecentering

Can you tell me the name of the unique animated style featured on the new iMac Pro page?

Is it possible to replicate the animation seen on the Apple iMac Pro page using only HTML5 and CSS3? What is this particular type of animation called? Visit the Apple iMac Pro page for reference. ...

htmlcss

Every fourth list item, beginning with a designated number

I'm attempting to add a border to specific list items in my HTML. I want the border to start from the 9th child and then continue every 4th child after that. For clarification, I'd like the 9th, 13th, 17th, 21st, 25th... list items to have white ...

csshtml

Invalid Operation: The value 'undefined' cannot be used as a function

I've been working on implementing a date picker feature for an HTML form. In the HTML header, I have included the following script: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> The script I&apo ...

javascriptjqueryhtml

What methods can be used to stop HTML5 audio from pre-downloading or streaming upon loading?

I am experiencing slow load times on my single page website that features a variety of HTML5 audio players. The issue seems to stem from certain browsers predownloading the content (mp3 and ogg). Internet Explorer Google Chrome Firefox Safari (probably Op ...

performancehtmlaudioaudio-streaming

Tips on how to position a div tag in the center of a webpage

I want to center the div class icons within the image section2. I'm unsure if the margin-top:-17% is effectively placing the div on the image. <img style="padding-top:5%; width:100%;"src="img/image-section2.png"> <div class="icon ...

htmlcss

Steps to resolve the error message 'ReferenceError: hello is not defined' in your code

I'm currently working on a game development project, aiming to create a mining-themed game. One of the core features I'm implementing involves clicking a button to increase a numeric value. In my game setup, players click to collect ores, and the ...

javascripthtml

How can I include line breaks using HTML `<br>` tags in a textarea field that is filled with data from a MySQL

Within a modal, I am showcasing a log inside a read-only <textarea> field that contains data fetched from my MySQL database. Below this, there is a writable <textarea> field where users can input updates to the log, which are then added to the ...

javascriptphpjqueryhtmlmysql

Exploration of HTML SVG map image tracking a specific route

Currently, I have an SVG file embedded in my HTML code. The SVG has a viewbox set to 500x500. Within this SVG, there is an Image element that is 2500x2500 in size, depicting a large map. Using Illustrator, I created a path that traces the roads on the ma ...

htmlsvgtransform

Guide on Generating Dynamic JSON to Set and Retrieve Values for Forms and Displaying the Bound Values

I'm a beginner in Ionic 3 and I'm having trouble creating a page that redirects to another page without validation. I want to display the data on the new page, but it's not working. Please help! I also want to create a dynamic JSON object a ...

javascripthtmlangularionic-framework

The Razor MVC does not support HTML syntax within an If condition

Here is the code snippet I currently have in one of my MVC views. It seems that within the specified if condition, the HTML code is not being recognized. <table class="table"> <tr class="row h4"> <td>Task</td> ...

c#htmlasp.net-mvc-4razor

Exploring the ins and outs of flexbox and utilizing overflow:auto

In my current situation, I have successfully resolved all cases but am now seeking assistance in debugging my mental model. Specifically, I am focusing solely on Chrome for the sake of simplicity. Within my nested "holy grail-ish" flexbox layouts, I have ...

cssflexbox

Add a unique CSS style to both text and image using anchor tags

Why isn't the hover effect of color transition and underline being applied to the image? It seems to only work for text. While I understand that the color transition may require a change in image color, shouldn't the underline still occur? This ...

javascripthtmlcss

The Django framework does not apply color to the Bootstrap Navbar as expected

I'm currently working on building an E-Commerce Website using Django. I have implemented a Bootstrap navbar, but the CSS styles that I obtained from this source are not functioning properly when placed within the {%block css %} tag. I have attached t ...

htmlcssdjangobootstrap-4

Incapable of stacking one canvas on top of another

I'm new to javascript and looking for help with positioning a canvas element behind another. The code I have may be a bit messy, so any assistance is greatly appreciated. My goal is to have the canvas named "myCanvas" appear behind "coinAnimation". Th ...

javascripthtmlcsscanvas