CSS positioning multiple graphs

I need to display a summary report using Highcharts with 4 pie graphs and 1 bar graph.

This is a screenshot of the specs:

report summary

All of the examples on Highcharts only show a single graph, and I am not sure how to get the controls small enough to fit on the top of the page or how to show all of them at one time.

In their pie example, they have a single <div> tag called "container":

<div id="container"></div>

The javascript populates it with their call:

Highcharts.chart('container', {

Using the question below:

Show/Update Separate Bar graphs with Drilldown Pie chart of Highcharts

It looks like I need to create multiple containers for each:

  • pieSubstation,
  • pieFeeder,
  • pieCycle,
  • pieRate, and
  • barCount.
<div id="pieSubstation"></div>
<div id="pieFeeder"></div>
<div id="pieCycle"></div>
<div id="pieRate"></div>
<div id="barCount"></div>

When I simply put those on the page, they show up with each below the other, and they are all large.

I am not good at positioning HTML using CSS. Once I start modifying the CSS using absolute, relative, or fixed, my webpage becomes unpredictable.

I need to position my graphs so that

  1. they are all at the top of the form,
  2. the pie charts are all in quarters on the left half, and
  3. the bar graph is on the right half.

How would CSS do this? Or is there another way?

48 thoughts on “CSS positioning multiple graphs”

Leave a Comment