Running into an issue trying to center 4 chart JS charts in a div

Question

I have a page with a sidepanel taking up 25% with float:left side of the page, and a div with float:right taking up the other 75%. In the right div, there are 4 ChartJS graphs in a 2 by 2 format. For reasons I can't seem to figure out, I can't get the Charts to either align in the center of the div, or get them to stretch out to use the entire div, and not just the left 70ish %. I've tried different floats, text-align, widths, padding and can't seem to get it right.


    
        
            
        
        
            
        
        
            
        
        
            
        
    


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

user_8273686 · Answer

OK, so if you're using Bootstrap then I think your issue is in the column count.

Bootstrap uses a 12-column layout, and you're using 10 per row (and I say "per row" because you've got 5*4 = 20 columns which have resolved to two 10x10 rows).

Instead try two rows, which will work unless you want a one-row layout on desktop or some such. This will look like:

Which is OK, but you'll still have the offset problem. And what you'll need to fix that is... offset! The issue you're facing is again, 10 columns used in a 12-column layout. Something like this, where x is one chart and y is another:

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

By introducing a 1-column offset, you'll center your columns like so:

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

And all you need to do is add .offset-sm-1 to your columns, like so:

And you should have nice centered charts.

user_4375327 · Answer

Does the design below suit your question? A simple way here is to use floating elements with defined heights and widths.

Below a working snippet and a screenshot mimicking your design (left and panels) as a visual proof.

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

#leftpanel,
#rightpanel {
  min-height: 100%;
  box-sizing: border-box;
  /* to 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;
  /* to include the borders in the dimensions */
}

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

.col-sm-5 {
  /* use floating positioning */
  float: left;
  width: 50%;
  height: 50%;
  box-sizing: border-box;
  /* to include the borders in the dimensions */
  border: 2px solid darkblue;
}


  
    Left panel
  
  
    Right panel

Running into an issue trying to center 4 chart JS charts in a div

2 Answers