Combining Two Charts In One Div - D3 / Css

- 1 answer

I'm definitely not good at css and this kind of stuff. I have these two plots (jsfiddle examples):

And I would like to have them in the same div, but not side-by-side, but like in 2x1 (2 lines and 1 column).

So far I'm ending up with this (these data, together, don't make sense but this is just a test):

enter image description here

I tried to reproduce this behavior here:

But here at least they are in the same line, it looks better. I would like to be able to have them in the same column, and different lines. I don't know how to do this.

This is the .css:

.arc text {
  font: 10px sans-serif;
  text-anchor: middle;

.arc path {
  stroke: #fff;

.info {
  padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;
  background: white;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;

.info h4 {
  margin: 0 0 5px;
  color: #777;

.info-legend {
  line-height: 18px;
  color: #555;

.info-legend i {
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 8px;
  opacity: 0.7;

.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;

.axis text {
  font-family: sans-serif;
  font-size: 11px;

.dot {
  stroke: #000;


From what I get from your description, you want the svg containers behave like a block instead of inline-block. One way to implement this is to set the width of svg to 100%, so that the width will be the same as the div container, although the height is the same as in your code.

Working example here

If you want to center align the chart, you can use transform-translate accordingly on svg containers.

Besides, set width to 100% could be helpful if you want to implement responsive chart with attributes such as preserveAspectRatio.