How to align 2 different charts?

Question

I have 2 different charts next to each other. The first chart has an x-axis, the second chart doesn't:

How can I make them both the same height?

This is the desired output:

Here is some sample code, how I created my charts:

var chart = AmCharts.makeChart("mydia", {
  "type": "xy",
  "dataProvider": data,
  "valueAxes": [{
    "id": "v1",
    "position": "left"
  }, {
    "id": "v2",
    "position": "right"
  }, {
    "id": "v3",
    "position": "bottom",
    "title": "Some text"
  }],
  "graphs": [{
    "balloonText": "x:[[x]] y:[[y]]",
    "xField": "ax",
    "yField": "ay",
  }, {
    "balloonText": "x:[[x]] y:[[y]]",
    "xField": "bx",
    "yField": "by",
  }],
});

Here is a fiddle.

You can use jQuery on document ready to check the height of both diagrams and the set the height of them to the highest one? Didn't write it in an answer because as far as I can see, you'll be able to manage that. http://stackoverflow.com/questions/11688250/setting-equal-heights-for-divs-with-jquery for a rough answer. — Gezzasa, Feb 24 '17 at 10:58

score 2 · Accepted Answer · answered Feb 24 '17 at 11:01

The problem is caused by missing bottom labels on second graph. To make them the same height you could do the following:

Define height of first graph 350, and 325 of second graph inside JS code
Modify CSS to align graphs vertically to top

JS example:

var chart = AmCharts.makeChart("mydia", {
  "type": "xy",
  "dataProvider": data,
  "height": 350,
  "valueAxes": [{
  ...rest of the code

CSS:

.diagram {
   width: 45%;
   vertical-align: text-top;
   display: inline-block;
}

Fixed fiddle here.

score 0 · Answer 2 · answered Feb 24 '17 at 11:05

You can set addClassNames parameter to true to enable class names on charts. Then, you can hide axis labels using css.

JSFiddle

data = [{
  "ax": "1",
  "ay": "2"
}, {
  "ax": "3",
  "ay": "4"
}, {
  "ax": "5",
  "ay": "6"
}];

var chart = AmCharts.makeChart("mydia", {
  "type": "xy",
  "dataProvider": data,
  "valueAxes": [{
    "id": "v1",
    "position": "left"
  }, {
    "id": "v2",
    "position": "right"
  }],
  "graphs": [{
    "balloonText": "x:[[x]] y:[[y]]",
    "xField": "ax",
    "yField": "ay",
  }, {
    "balloonText": "x:[[x]] y:[[y]]",
    "xField": "bx",
    "yField": "by",
  }],
});

var chart = AmCharts.makeChart("mydia2", {
 "addClassNames": true,
  "type": "xy",
  "dataProvider": data,
  "valueAxes": [{
    "id": "v1",
    "position": "left"
  }, {
    "id": "v2",
    "position": "right"
  }, {
    "id": "v3",
    "position": "bottom",
  }],
  "graphs": [{
    "xField": "ax",
    "yField": "ay",
  }, {
    "xField": "bx",
    "yField": "by",
  }],
});

.diagram {
  width: 45%;
  height: 300px;
  display: inline-block;
}

.value-axis-v3 .amcharts-axis-label {
  visibility: hidden;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>

<div id="mydia" class="diagram"></div>
<div id="mydia2" class="diagram"></div>

How to align 2 different charts?

2 Answers2