am chart 5 Stacked column chart with line chart - amcharts5

Question

I am trying to create a stacked column chart and trying to integrate a line chart on Y axis, Chart is rendering but line is not visible which is using opposite y axis value.
latitudeSeries should create a line chart using the opposite y axis that is Y axis value on the right side. But it's not rendering the line chart though opposite y axis is rendered.
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
layout: root.verticalLayout
}));
// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50
}));
var data = [{
"year": "2021",
"europe": 2.5,
"namerica": 2.5,
"asia": 2.1,
"lamerica": 1,
"meast": 0.8,
"africa": 0.4,
"latitude": 40.00
}, {
"year": "2022",
"europe": 2.6,
"namerica": 2.7,
"asia": 2.2,
"lamerica": 0.5,
"meast": 0.4,
"africa": 0.3,
"latitude": 45.74
}, {
"year": "2023",
"europe": 2.8,
"namerica": 2.9,
"asia": 2.4,
"lamerica": 0.3,
"meast": 0.9,
"africa": 0.5,
"latitude": 39.74
}];
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
categoryField: "year",
renderer: am5xy.AxisRendererX.new(root, {
cellStartLocation: 0.1,
cellEndLocation: 0.9
}),
tooltip: am5.Tooltip.new(root, {})
}));
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
min: 0,
renderer: am5xy.AxisRendererY.new(root, {})
}));
var latitudeAxisRenderer = am5xy.AxisRendererY.new(root, {opposite:true});
var latitudeAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: latitudeAxisRenderer
}));
var latitudeSeries = chart.series.push(am5xy.LineSeries.new(root, {
xAxis: xAxis,
yAxis: latitudeAxis,
valueYField: "latitude",
valueXField: "year",
tooltip:am5.Tooltip.new(root, {
labelText:"latitude: {valueY}"
})
}));
latitudeSeries.strokes.template.setAll({ strokeWidth: 2 });
// Add circle bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
latitudeSeries.bullets.push(function() {
var graphics = am5.Circle.new(root, {
strokeWidth: 2,
radius: 5,
stroke: latitudeSeries.get("stroke"),
fill: root.interfaceColors.get("background"),
});
graphics.adapters.add("radius", function(radius, target) {
return target.dataItem.dataContext.townSize;
})
return am5.Bullet.new(root, {
sprite: graphics
});
});
latitudeSeries.data.setAll(data);
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
function makeSeries(name, fieldName, stacked) {
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
stacked: stacked,
name: name,
xAxis: xAxis,
yAxis: yAxis,
valueYField: fieldName,
categoryXField: "year"
}));
series.columns.template.setAll({
tooltipText: "{name}, {categoryX}:{valueY}",
width: am5.percent(90),
tooltipY: am5.percent(10)
});
xAxis.data.setAll(data);
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
series.bullets.push(function () {
return am5.Bullet.new(root, {
locationY: 0.5,
sprite: am5.Label.new(root, {
text: "{valueY}",
fill: root.interfaceColors.get("alternativeText"),
centerY: am5.percent(50),
centerX: am5.percent(50),
populateText: true
})
});
});
legend.data.push(series);
}
makeSeries("Europe", "europe", true);
makeSeries("North America", "namerica", true);
makeSeries("Asia", "asia", true);
makeSeries("Latin America", "lamerica", true);
makeSeries("Middle East", "meast", true);
makeSeries("Africa", "africa", true);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
chart.appear(1000, 100);
}); // end am5.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>

Answer 1

Your xAxis is a category axis, not a value axis. Thus, in your latitudeSeries settings, you must use categoryXField instead of valueXField.
For more readability, I recommend you to synchronize latitudeAxis and yAxis using syncWithAxis. You should also set transparency on your column series.
I edited your code and added these little corrections (with comments).
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
layout: root.verticalLayout
}));
// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50
}));
var data = [{
"year": "2021",
"europe": 2.5,
"namerica": 2.5,
"asia": 2.1,
"lamerica": 1,
"meast": 0.8,
"africa": 0.4,
"latitude": 40.00
}, {
"year": "2022",
"europe": 2.6,
"namerica": 2.7,
"asia": 2.2,
"lamerica": 0.5,
"meast": 0.4,
"africa": 0.3,
"latitude": 45.74
}, {
"year": "2023",
"europe": 2.8,
"namerica": 2.9,
"asia": 2.4,
"lamerica": 0.3,
"meast": 0.9,
"africa": 0.5,
"latitude": 39.74
}];
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
categoryField: "year",
renderer: am5xy.AxisRendererX.new(root, {
cellStartLocation: 0.1,
cellEndLocation: 0.9
}),
tooltip: am5.Tooltip.new(root, {})
}));
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
min: 0,
renderer: am5xy.AxisRendererY.new(root, {})
}));
var latitudeAxisRenderer = am5xy.AxisRendererY.new(root, {opposite:true});
var latitudeAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
syncWithAxis: yAxis, // Synchronize axes to get a more readable grid
renderer: latitudeAxisRenderer
}));
var latitudeSeries = chart.series.push(am5xy.LineSeries.new(root, {
xAxis: xAxis,
yAxis: latitudeAxis,
valueYField: "latitude",
categoryXField: "year", // Use categoryXField instead of valueXField
tooltip:am5.Tooltip.new(root, {
labelText:"latitude: {valueY}"
})
}));
latitudeSeries.strokes.template.setAll({ strokeWidth: 2 });
// Add circle bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
latitudeSeries.bullets.push(function() {
var graphics = am5.Circle.new(root, {
strokeWidth: 2,
radius: 5,
stroke: latitudeSeries.get("stroke"),
fill: root.interfaceColors.get("background"),
});
graphics.adapters.add("radius", function(radius, target) {
return target.dataItem.dataContext.townSize;
})
return am5.Bullet.new(root, {
sprite: graphics
});
});
latitudeSeries.data.setAll(data);
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
function makeSeries(name, fieldName, stacked) {
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
stacked: stacked,
name: name,
xAxis: xAxis,
yAxis: yAxis,
valueYField: fieldName,
categoryXField: "year"
}));
series.columns.template.setAll({
tooltipText: "{name}, {categoryX}:{valueY}",
width: am5.percent(90),
tooltipY: am5.percent(10),
// Set column and stroke transparency for more readability
opacity: 0.75,
stroke: "transparent"
});
xAxis.data.setAll(data);
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
series.bullets.push(function () {
return am5.Bullet.new(root, {
locationY: 0.5,
sprite: am5.Label.new(root, {
text: "{valueY}",
fill: root.interfaceColors.get("alternativeText"),
centerY: am5.percent(50),
centerX: am5.percent(50),
populateText: true
})
});
});
legend.data.push(series);
}
makeSeries("Europe", "europe", true);
makeSeries("North America", "namerica", true);
makeSeries("Asia", "asia", true);
makeSeries("Latin America", "lamerica", true);
makeSeries("Middle East", "meast", true);
makeSeries("Africa", "africa", true);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
chart.appear(1000, 100);
}); // end am5.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>