Change default behaviour of legend in Amchart 5 - amcharts

Question

I'm trying to make this chart (https://www.amcharts.com/demos/reversed-value-axis/) in angular and need help in changing default behaviour of legend like if i click on any legend only that axis should be show other will hide unlike now if we click on any legend, that will hide.
is there any possible way to do it?
Default Chart
If click on one legend

Answer 1

Yes, of course...
To do that, you need a collection of all your series. You also need hide() and appear() methods.
Here is a possible implementation:
am5.ready(() => {
let root = am5.Root.new("chartdiv");
root.setThemes([
am5themes_Animated.new(root)
]);
let chart = root.container.children.push(am5xy.XYChart.new(root, {
layout: root.verticalLayout
}));
let data = [
{
year: "1930",
italy: 1,
germany: 5,
uk: 3
},
{
year: "1934",
italy: 1,
germany: 2,
uk: 6
},
{
year: "1938",
italy: 2,
germany: 3,
uk: 1
},
{
year: "1950",
italy: 3,
germany: 4,
uk: 1
},
{
year: "1954",
italy: 5,
germany: 1,
uk: 2
},
{
year: "1958",
italy: 3,
germany: 2,
uk: 1
},
{
year: "1962",
italy: 1,
germany: 2,
uk: 3
},
{
year: "1966",
italy: 2,
germany: 1,
uk: 5
},
{
year: "1970",
italy: 3,
germany: 5,
uk: 2
},
{
year: "1974",
italy: 4,
germany: 3,
uk: 6
},
{
year: "1978",
italy: 1,
germany: 2,
uk: 4
}
];
let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
categoryField: "year",
renderer: am5xy.AxisRendererX.new(root, {})
}));
xAxis.data.setAll(data);
let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {
inversed: true
})
}));
function createSeries(name, field) {
let series = chart.series.push(am5xy.LineSeries.new(root, {
name,
xAxis,
yAxis,
categoryXField: "year",
valueYField: field
}));
series.bullets.push(() => {
return am5.Bullet.new(root, {
sprite: am5.Circle.new(root, {
radius: 5,
fill: series.get("fill")
})
});
});
series.data.setAll(data);
return series;
}
// The interesting part starts here!
let allSeries = [];
allSeries.push(createSeries("Italy", "italy"));
allSeries.push(createSeries("Germany", "germany"));
allSeries.push(createSeries("UK", "uk"));
let legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50
}));
legend.itemContainers.template.events.on("click", () => {
for (let series of allSeries) {
series.hide();
}
});
legend.data.setAll(chart.series.values);
document.getElementById("reset").addEventListener("click", () => {
for (let series of allSeries) {
series.appear();
}
});
});
#chartdiv {
width: 100%;
height: 350px;
}
#reset {
width: 50%;
display: block;
margin: auto;
cursor: pointer;
}
<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>
<div id="chartdiv"></div>
<button type="button" id="reset">Reset</button>