click on a piece in stacked column series xy chart amCharts5

23 Views Asked by At

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

0

There are 0 best solutions below