Having trouble aligning four chart JS charts perfectly within a div

I am facing an issue with my webpage layout. I have a side panel that takes up 25% of the page on the left side and a div on the right that takes up 75%. Within this right div, I have 4 ChartJS graphs arranged in a 2 by 2 format. Despite trying various methods such as adjusting floats, text alignment, widths, and padding, I cannot seem to get the charts to align properly within the div. They either do not center or fail to stretch out to fill the entire available space.

<div class="dashboards">
    <div id="chartsId" class="row">
        <div class="col-sm-5">
            <canvas width="200" height="200"></canvas>
        </div>
        <div class="col-sm-5">
            <canvas width="200" height="200"></canvas>
        </div>
        <div class="col-sm-5">
            <canvas width="200" height="200"></canvas>
        </div>
        <div class="col-sm-5">
            <canvas width="200" height="200"></canvas>
        </div>
    </div>
</div>

.dashboards {
    margin: 0;
    border: 1px solid red;
    display: table;
    width: 100%;
    table-layout: fixed;
    text-align: center;
}
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

It seems like the issue you're experiencing with Bootstrap is related to the column count.

Bootstrap follows a 12-column layout system, but in your case, you are trying to fit 10 columns per row (resulting in two 10x10 rows).

To resolve this, consider using two separate row elements as shown below:

<div class="row">
  <div class="col-sm-5"><chart /></div>
  <div class="col-sm-5"><chart /></div>
</div>

<div class="row">
  <div class="col-sm-5"><chart /></div>
  <div class="col-sm-5"><chart /></div>
</div>

This should address the column count issue, but if you encounter offset problems, you can utilize the offset feature. By adding a 1-column offset, you can center your columns effectively:

| |x|x|x|x|x|y|y|y|y| |

To implement this offset, include the class .offset-sm-1 in your columns:

<div class="row">
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
</div>

<div class="row">
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
</div>

With these adjustments, your charts should appear nicely centered on the page.

Answer №2

Is the design presented below suitable for your inquiry? An easy method is to utilize floating elements with specific heights and widths.

Here is a functional code snippet and a screenshot that mirrors your design (left and right panels) as visual evidence.

https://i.sstatic.net/AuTcO.png

#root {
  display: flex;
  justify-content: flex-start;
}

#leftpanel,
#rightpanel {
  min-height: 100%;
  box-sizing: border-box;
  /* include the borders in the dimensions */
}

#leftpanel {
  width: 25%;
  background: black;
  color: white;
}

#rightpanel {
  width: 75%;
  background: #f0f0ff;
}

.dashboards {
  width: 100%;
  margin: 0;
  border: 1px solid red;
  box-sizing: border-box;
  /* include the borders in the dimensions */
}

.row {
  margin: auto;
  /* Defining width and height to allow the "col-sm-5" class to be defined */
  /* relative to them.                                                 */
  width: 400px;
  height: 400px;
  box-sizing: border-box;
  /* include the borders in the dimensions */
  border: 5px solid darkgreen;
  background: #f0f0f0;
}

.col-sm-5 {
  /* utilize floating positioning */
  float: left;
  width: 50%;
  height: 50%;
  box-sizing: border-box;
  /* include the borders in the dimensions */
  border: 2px solid darkblue;
}
<div id="root">
  <div id="leftpanel">
    Left panel
  </div>
  <div id="rightpanel">
    Right panel
    <div class="dashboards">
      <div id="chartsId" class="row">
        <div class="col-sm-5">
          <canvas width="200" height="200"></canvas>
        </div>
        <div class="col-sm-5">
          <canvas width="200" height="200"></canvas>
        </div>
        <div class="col-sm-5">
          <canvas width="200" height="200"></canvas>
        </div>
        <div class="col-sm-5">
          <canvas width="200" height="200"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

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

Suggestions for enhancing my HTML form using CSS

My school assignment involves creating a webpage. Here are the initial design concepts I have come up with: Click here for image This is what I have implemented so far: Click here for image What else do I need to add? <!DOCTYPE html> <html la ...

htmlcss

How can I achieve a similar layout in my .cshtml file?

https://i.sstatic.net/f1C0G.png Hey there, I'm looking to achieve a layout similar to the one shown in the image. Specifically, I want the left side panel to remain unchanged when expanding the Accordion control on the right side. Can someone guide ...

htmlcss.nettwitter-bootstrapmodel-view-controller

Checking if the current time falls within a specific time range, without taking the year into account, using Javascript

I am looking to add a special feature using JavaScript. I would like to change the background images of my webpage to ones related to Christmas during the holiday week, and have it repeat every year. How can I determine if the current date and time fall ...

javascriptjqueryangularjsnode.jshtml

Uploading profile photos via PHP and storing in a database

I am encountering an issue where the uploaded photo appears on the site but its corresponding name is not being saved in the database. The code successfully uploads the photo to the site but unfortunately, the file name is not being stored in the database. ...

phphtmlmysqlsessionfile-upload

Maximizing Efficiency: Using a Single Prototype-Instance Across Multiple HTML Pages

I have defined some Javascript "Classes" in separate files using the Prototype function as shown below: function Playlist(id, name){ this.id = id; this.name = name; } Playlist.prototype.getid = function(){return this.id;} Playlist.prototype.getn ...

javascripthtml

After inputting new values, the table is not allowing me to update it

Recently acquainted with Angular, I am in the process of inserting new values and displaying them in a table using three components. These components include one for listing user information user-list, one for creating information rows user-form, and one f ...

htmlangulartypescriptangular-ui-router

Variety of formatting options for menu items when the menu is in its collapsed state

I am working with a Bootstrap nav-bar that collapses into a button by default. Within my nav-bar, I have opted for images instead of text links. However, when the nav-bar is collapsed, I would like these images to be smaller in size. Is there a way to cu ...

csstwitter-bootstrap

Conceal the image within the second and third div elements using jQuery

I am facing an issue with my div structure <div class="block_content"> <img src="image1.png"> </div> <div class="block_content"> <img src="image2.png"> </div> <div class="block_content"> <img src="i ...

jqueryhtmlcss

Why are the radio buttons not aligned with the text in the center?

Currently, I am in the process of building a form that includes radio buttons. However, I've encountered an issue where the text next to the radio buttons appears on a different level than the buttons themselves. How can I go about fixing this partic ...

javascripthtmlcss

Is it possible to create several XMLHttpRequests for various <li> elements upon clicking on them individually?

Today, I was experimenting with XMLHttpRequest to fetch news headlines from 10 different countries using the NewsAPI. I created 10 <li> tags for each country and assigned them an onclick function that triggers a JavaScript function to append the coun ...

javascripthtmlajaxxmlhttprequest

The updated values in an Angular application may not always be accurately represented by interpolated values

The values of the elements in the dropzone1 array only show the initial top and left values, not the latest ones. Within the draw() function, I add the top and left values to the topLeft array and then push it to the dropzone1 array inside the move() func ...

javascripthtmlangulartypescript

Transforming HTML into a DOCX document

I am exploring all possible options for converting an HTML document to a DOCX file. Background : I have some simple documentation in HTML (just basic elements like H1, H2, P, IMG), and I want to transform it into Word documents. An ideal solution would ...

htmlmavendocxdocfile-conversion

What is the best method for positioning two forms in a vertical arrangement?

I'm looking to integrate a Login form in HTML within my C# project. Here's what I have so far: However, as you can see, the layout is not very aesthetically pleasing. I'm struggling to align the elements in a more visually appealing way. My ...

c#htmlcss

Resolve the issue of autofill data overlapping with field labels

My form incorporates the Canada Post AddressComplete tool, which functions similarly to Google Maps Autocomplete. As you type your address, suggestions appear in a drop-down menu. However, after selecting an address, the text in the Postal Code and City f ...

javascriptcssformsautofill

Does the class "col-sm-4" in bootstrap automatically become "col-sm-4 col-md-4 col-lg-4" if col-md and col-lg are not defined?

Is col-sm the default class applied for large screens if col-lg and col-md are not specified? ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having trouble with my jQuery .hover() code not running as expected

Whenever I hover over my divs, I want them to change color. However, the code doesn't seem to be working as expected when I try to do so. I suspect that the issue might be related to the z-index property used in the class that I am trying to hover ove ...

javascriptjqueryhtmlcssjquery-hover

Slide the horizontal navigation menu to reveal additional options upon clicking the arrow

I currently have a horizontal sub-menu with 8 options, but I need to add more without it dropping to a second line. My goal is to create a specific effect where the last option acts as an arrow. When this arrow is clicked, I want the entire menu to slide h ...

javascriptjquerycsshtml

I found that the Angular checkbox was only allowing me to select one value at a time instead of

Hey there, I am currently working on an angular tickbox where I want to be able to tick multiple values. However, I am facing an issue where only the latest checkbox value is displayed instead of both English and German together. How can I populate data fr ...

htmlangulartypescript

Experiencing Issues with the Email Button Functionality on My Website

I am looking to create an "Email" button that will send the user-entered text to my email address. Here is the code snippet: <form method="post" action="malto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cb ...

htmlwebvs-web-site-project

The menu doesn't respond to clicks when the cursor is positioned in the center of the button

I seem to be facing a minor issue where when I hover my mouse over the very top of a button, it is clickable. However, as soon as I move the cursor just slightly downward, a dropdown menu appears and I am no longer able to click on the button. https://i.ss ...

htmlcss