How to put two different charts next to each other?

Question

I want to put 2 different highcharts side by side in one page. One is pie chart and the other one is gauge chart. Can you please help me to organize this structure?

Answered [here](https://stackoverflow.com/questions/2637696/how-to-place-div-side-by-side) and [here](https://stackoverflow.com/questions/17217766/two-divs-side-by-side-fluid-display). — evolutionxbox, Jul 19 '17 at 12:52

score 2 · Answer 1 · answered Jul 19 '17 at 12:58

You can use float. More information about float is available here. Try if something like this works.

#chart1{
    width: 50%; /* set width to 50% of page width */
    float: left; /* Make the element go to the left */
}

#chart2{
    width: 50%;
    float: right;
}

Don't forget to add style="clear: both" to the next element! Good luck! Hope this helps!

score 1 · Answer 2 · answered Jul 19 '17 at 12:56

One option is using a flexbox.

.container {
  display: flex;
  width: 100%;
  height: 150px;
}

.chart1,
.chart2 {
  width: 50%;
  background-color: lightblue;
  border: thin solid darkgray;
}

<div class="container">
  <div class="chart1">chart 1</div>
  <div class="chart2">chart 2</div>
</div>

score 0 · Answer 3 · edited Jul 19 '17 at 14:09

0

You can add bootstrap classes like this

<div class="col-md-12">
  <div class="col-md-6">
    Chart 1
  </div>
  <div class="col-md-6">
    Chart 2
  </div>
</div>

edited Jul 19 '17 at 14:09

shabeer90

5,161
4
47
65

answered Jul 19 '17 at 13:12

Jaimin Raval

146
5

How to put two different charts next to each other?

3 Answers3