There is no way to specify a minimum width/height (depending on axis rotation) as the column size is directly related its data; setting a minimum height would misrepresent the values in your chart.
A better solution is to hide the labels that don't fit by setting `hideOversized` to true on the label bullets and use tooltips instead with a chart cursor.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [{
"year": "2016",
"europe": 1.5,
"namerica": 1.5,
"asia": 1.1,
"lamerica": 0.3,
"meast": 0.2,
"africa": 0
}, {
"year": "2017",
"europe": 0,
"namerica": 1.7,
"asia": 1.2,
"lamerica": 0.3,
"meast": 0.3,
"africa": 0.1
}, {
"year": "2018",
"europe": 1.8,
"namerica": 1.9,
"asia": 0,
"lamerica": 0.3,
"meast": 0.3,
"africa": 0.1
}];
chart.legend = new am4charts.Legend();
chart.legend.position = "right";
// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.renderer.grid.template.opacity = 0;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.renderer.grid.template.opacity = 0;
valueAxis.renderer.ticks.template.strokeOpacity = 0.5;
valueAxis.renderer.ticks.template.stroke = am4core.color("#495C43");
valueAxis.renderer.ticks.template.length = 10;
valueAxis.renderer.line.strokeOpacity = 0.5;
valueAxis.renderer.baseGrid.disabled = true;
valueAxis.renderer.minGridDistance = 40;
// Create series
function createSeries(field, name) {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = field;
series.dataFields.categoryY = "year";
series.stacked = true;
series.name = name;
series.tooltipText = "{name}: {valueX}";
var labelBullet = series.bullets.push(new am4charts.LabelBullet());
labelBullet.label.hideOversized = true;
labelBullet.locationX = 0.5;
labelBullet.label.text = "{valueX}";
labelBullet.label.fill = am4core.color("#fff");
}
createSeries("europe", "Europe");
createSeries("namerica", "North America");
createSeries("asia", "Asia");
createSeries("lamerica", "Latin America");
createSeries("meast", "Middle East");
createSeries("africa", "Africa");
chart.legend.position = 'bottom';
chart.cursor = new am4charts.XYCursor();
<!-- language: lang-css -->
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 500px;
}
<!-- language: lang-html -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
<!-- end snippet -->
You can get two out of the three with the stacked value axis approach you're using.
Column series will always reserve space for other columns, regardless of whether there is a value present or not, so you can't force the top chart's column to fully expand. A workaround for this is to create a second, invisible category axis (disabling labels and grids) and assign the bottom series' `xAxis` to the second category axis:
let categoryAxis2 = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis2.renderer.grid.template.location = 0;
categoryAxis2.dataFields.category = "name";
categoryAxis2.renderer.ticks.template.disabled = true;
categoryAxis2.renderer.minGridDistance = 1;
categoryAxis2.renderer.labels.template.disabled = true;
// ...
series.xAxis = categoryAxis2; //repeat for both bottom chart's series
// ...
This will make the top chart's column expand to the full width as the other columns are associated with a different axis entirely.
To reverse the bottom chart to stop from the top, set `inversed` to true in the value axis' renderer object:
```
valueAxis2.renderer.inversed = true;
```
The category axis cannot be placed in the middle, however.
Demo below:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.leftAxesContainer.layout = "vertical";
chart.numberFormatter.numberFormat = '# €';
chart.data = [
{name: "2011\nLorient", transport: 56, stay: 200, costByNight: 29, costByKm: 14},
{name: "2015\nPoitiers\nLa Rochelle", transport: 96, stay: 54, costByNight: 9, costByKm: 23},
{name: "2016\nRoyaume-Uni", transport: 160, stay: 332, costByNight: 47, costByKm: 62},
{name: "2016\nBiarritz", transport: 185, stay: 516, costByNight: 74, costByKm: 27},
{name: "2017\nRoyaume-Uni", transport: 258, stay: 355, costByNight: 36, costByKm: 24},
{name: "2018\nSingapour\nVietnam\nTaïwan", transport: 1020, stay: 622, costByNight: 41, costByKm: 8},
{name: "2018\nVietnam", transport: 753, stay: 294, costByNight: 49, costByKm: 8},
{name: "2019\nCanada", transport: 1074, stay: 342, costByNight: 38, costByKm: 13},
{name: "2019\nLorient\nGroix", transport: 77, stay: 190, costByNight: 27, costByKm: 20}
];
chart.padding(20, 5, 2, 5);
// Cities/countries names
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "name";
categoryAxis.renderer.ticks.template.disabled = false;
categoryAxis.renderer.minGridDistance = 1;
categoryAxis.renderer.labels.template.wrap = true;
categoryAxis.renderer.labels.template.maxWidth = 100;
categoryAxis.renderer.labels.template.fontSize = ".75em";
categoryAxis.renderer.labels.template.textAlign = "middle";
/* FIRST CHART */
// First Y axis
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.zIndex = 1;
valueAxis.renderer.baseGrid.disabled = true;
valueAxis.renderer.fontSize = "0.8em";
// Transport
let series = chart.series.push(new am4charts.ColumnSeries());
series.name = "Transport";
series.dataFields.valueY = "transport";
series.dataFields.categoryX = "name";
series.yAxis = valueAxis;
// Configure columns
series.columns.template.width = am4core.percent(100);
series.columns.template.tooltipText = "[font-size:13px]Transport : {valueY}";
series.columns.template.fillOpacity = .8;
// Logement
series = chart.series.push(new am4charts.ColumnSeries());
series.name = "Logement";
series.dataFields.valueY = "stay";
series.dataFields.categoryX = "name";
series.yAxis = valueAxis;
// Make it stacked
series.stacked = true;
// Configure columns
series.columns.template.width = am4core.percent(100);
series.columns.template.tooltipText = "[font-size:13px]Logement : {valueY}";
series.columns.template.fillOpacity = .8;
/* SECOND CHART */
let valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis2.marginTop = 50;
valueAxis2.renderer.inversed = true;
valueAxis2.tooltip.disabled = true;
valueAxis2.renderer.baseGrid.disabled = true;
valueAxis2.zIndex = 3;
valueAxis2.renderer.fontSize = "0.8em";
let categoryAxis2 = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis2.renderer.grid.template.location = 0;
categoryAxis2.dataFields.category = "name";
categoryAxis2.renderer.ticks.template.disabled = true;
categoryAxis2.renderer.minGridDistance = 1;
categoryAxis2.renderer.labels.template.disabled = true;
series = chart.series.push(new am4charts.ColumnSeries());
series.name = "Prix par 200km";
series.dataFields.valueY = "costByKm";
series.dataFields.categoryX = "name";
series.yAxis = valueAxis2;
series.stacked = true;
// Configure columns
series.columns.template.width = am4core.percent(40);
series.columns.template.tooltipText = "[font-size:13px]Prix pour 200km : {valueY}";
series.columns.template.fillOpacity = .8;
series.xAxis = categoryAxis2;
series = chart.series.push(new am4charts.ColumnSeries());
series.name = "Prix par nuitée";
series.dataFields.valueY = "costByNight";
series.dataFields.categoryX = "name";
series.yAxis = valueAxis2;
series.xAxis = categoryAxis2;
// Configure columns
series.columns.template.width = am4core.percent(40);
series.columns.template.tooltipText = "[font-size:13px]Prix par nuit : {valueY}";
series.columns.template.fillOpacity = .8;
<!-- language: lang-css -->
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 350px;
}
<!-- language: lang-html -->
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
<!-- end snippet -->