this issue is about am charts 5 - xy chart stacked column series i have no idea how to highlight only one clicked piece at the time.. for now all that can i do is highlight the same elements in each series at the same time -> see the pen code
export const DATA = [{
bar: [
{
name: "Department1", displayName: "Department 1", value: 25, data: [
{ name: "ASD", displayName: "ASD D", color: "#9b59b6", value: 1, data: [] },
{ name: "FGH", displayName: "FGH H", color: "#3b2146", value: 2, data: [] },
{ name: "RTY", displayName: "RTY Y", color: "#8a7b91", value: 3, data: [] },
{ name: "YUI", displayName: "YUI I", color: "#250433", value: 4, data: [] }]
},
{name: "Department2", displayName: "Department 2", value: 30, data: [
{ name: "Q", displayName: "Q", color: "#59b688", value: 5, data: [] },
{ name: "E", displayName: "E", color: "#b69559", value: 6, data: [] },
{ name: "W", displayName: "W", color: "#b65995", value: 7, data: [] },
{ name: "Y", displayName: "Y", color: "#ff0080", value: 8, data: [] }]
},
{name: "Department3", displayName: "Department 3",value: 20, data: [
{ name: "ASD", displayName: "D", color: "#b508ff", value: 9, data: [] },
{ name: "FGH", displayName: "H", color: "#4c558a", value: 1, data: [] },
{ name: "RTY", displayName: "Y", color: "#5ba14c", value: 12, data: [] },
{ name: "YUI", displayName: "I", color: "#e34949", value: 23, data: [] }]
},
{name: "Department4", displayName: "Department 4", value: 15, data: [
{ name: "Q", displayName: "Q", color: "#59b688", value: 5, data: [] },
{ name: "E", displayName: "E", color: "#b69559", value: 6, data: [] },
{ name: "W", displayName: "W", color: "#b65995", value: 7, data: [] },
{ name: "Y", displayName: "Y", color: "#ff0080", value: 8, data: [] }]
},
{name: "Department5", displayName: "Department 5", value: 40, data: [
{ name: "ASD", displayName: "ASD D", color: "#503e39", value: 33, data: [] },
{ name: "FGH", displayName: "FGH H", color: "#6b0f1d", value: 1, data: [] },
{ name: "RTY", displayName: "RTY Y", color: "#395e53", value: 6, data: [] },
{ name: "YUI", displayName: "YUI I", color: "#9a86fa", value: 9, data: [] }]
},
{name: "Department7", displayName: "Department 7", color: "#395e53", value: 22, data: [
{ name: "QWER", displayName: "QWER R", color: "#2ecc71", value: 8, data: [] },
{ name: "DFG", displayName: "DFG G", color: "#34495e", value: 18, data: []}]
}],
}]
const data = [
{ categoryName: 'Department 1', 'ASD D': 1, 'FGH H': 2, 'RTY Y': 3, 'YUI I': 4 },
{ categoryName: 'Department 2', Q: 5, E: 6, W: 7, Y: 8 },
{ categoryName: 'Department 3', D: 9, H: 1, Y: 12, I: 23 },
{ categoryName: 'Department 4', Q: 5, E: 6, W: 7, Y: 8 },
{ categoryName: 'Department 5', 'ASD D': 33, 'FGH H': 1, 'RTY Y': 6, 'YUI I': 9 },
{ categoryName: 'Department 7', 'QWER R': 8, 'DFG G': 18 }
];
private makeSeries(seriesName: string, valueField: string, color: string) {const fill = am5.color(color)
const series = this.chart.series.push(am5xy.ColumnSeries.new(this.root, {
name: seriesName,
stacked: true,
xAxis: this.xAxis,
yAxis: this.yAxis,
valueYField: valueField,
categoryXField: "categoryName",
stroke: undefined,
legendLabelText: "{name}",
fill: fill
}));
series.columns.template.states.create("highlight", {
fill: am5.color(0x297373),
stroke: am5.color(0x297373)
});
let previousClickedItem: am5.RoundedRectangle | undefined;
series.columns.template.events.on("click", ev => {
const clickedItem = series.columns.values.find(column => column.uid === ev.target.uid);
if (previousClickedItem) {
previousClickedItem.states.apply("default");
}
if (clickedItem) {
clickedItem.states.apply("highlight");
previousClickedItem = clickedItem;
}
});
series.columns.template.setAll({
tooltipText: "{valueYField}, {categoryX}: {valueY}",
tooltipY: am5.percent(90)
});
const root = this.root;
series.bullets.push(() => {
return am5.Bullet.new(root, {
sprite: am5.Label.new(root, {
text: "{valueX}",
fill: root.interfaceColors.get("alternativeText"),
centerY: am5.p50,
centerX: am5.p50,
populateText: true
})
});
});
series.data.setAll(this.data);
series.appear(1000, 100);
return this.series = series;
}
https://codepen.io/julkadabrowka/pen/ExMQBvV
how to highlight only one piece each click? :(
i think i dont know how to get to each column piece correctly