How to provide additinal data on click event (amchart + react)

Viewed 19

I have data struct

{
Priority    int    `json:"priority"`
Component   int    `json:"component"`
}

Example of the data:

[{
  Priority: 1,
  Component: 4
 }
,
 {
  Priority: 2,
  Component: 3
}]

And I have the amchart

const chart = am4core.create("testChart", am4charts.XYChart);
const categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "priority"; 

And I have function that handle "hit" event

categoryAxis.renderer.labels.template.events.on("hit", function (event) {
  console.log({"dataItem": event.target.dataItem})
  props.setID(
    parseInt(
      (event.target.dataItem as AxisDataItem & { category: string })
        .category
    ) 
  );
});

So when I click on the Y axis categories the code call setID() with "priority" value from the category.

The problem: I need to provide for setID() not "priority", but "component". But I can't present the "component" values in the amchart Y axis. The client should see only "priority" values. But when the client click on this value the setId() should to get "component" value that is corresponded to this "priority". For example when I click on 1 it should call setId() with 4. How I can to do? Thanks!

1 Answers
Related