AmChart V4 : make each label in category axes clickable and give for each label different functionality

Question

I used amchart 4 to create a XYChart. I want to give each label on Y axes a different functionality: by clicking each of them, it will show a different modal.

data = [{ "name": "name1",
          "value1": "1",
          "value2": "2"},
 
        { "name": "name2",
          "value1": "10"
          "value2": "20"}]

    var chart = am4core.create("chartdiv", am4charts.XYChart);
    chart.data = data;

    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "name";

    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());

To make each label on Y axes clickable and show a modal, I add this:

categoryAxis.renderer.labels.template.events.on("hit", function(event){
     $(document).ready(function(){
            $("#mymodal").modal('show');
        });
})

But of course, all it does overwriting and give the same modal for all labels. Is there a way to access the labels individually (create a forloop over the labels)?

Answer 1

1 solution:

I gave each label a different modal to show (Thanks to my teamleader Yaniv for help =P )

I added to data a variable "copy_num":

data = [{ "name": "name1",
          "value1": "1",
          "value2": "2",
          "copy_num": "1"},
 
        { "name": "name2",
          "value1": "10"
          "value2": "20",
          "copy_num": "2"}]

Then:

categoryAxis.renderer.labels.template.events.on("hit", function(event){
     $(document).ready(function(){
          $("#chartcopy" + 
              event.target.dataItem.dataContext.copy_num).modal('show');
        });
})

In HTML I added the modals:

<div class="copy modal fade" id="chartcopy1" role="dialog"></div>
<div class="copy modal fade" id="chartcopy2" role="dialog"></div>

2 solution:

I used 'range' to make new labels:

https://www.amcharts.com/docs/v4/tutorials/grouping-axis-labels-using-ranges/ https://www.amcharts.com/docs/v4/tutorials/using-axis-ranges-on-radar-chart/

var range = categoryAxis.axisRanges.create();
range.category = "name1";
range.endCategory = "name2";
range.label.text = "label_1";
range.label.verticalCenter = "middle";
range.label.events.on("hit", function(event){{
    $(document).ready(function(){{
        $({modal_to_show}).modal('show');
    }});
}})

Add some nice design:

range.label.cursorOverStyle = am4core.MouseCursorStyle.pointer;

range.label.background = new am4core.RoundedRectangle();
range.label.background.cornerRadius(5, 5, 5, 5);
range.label.background.fill = am4core.color("#eee");

range.label.truncate = true;
range.label.maxWidth = 180;

var hoverLabelState = range.label.background.states.create("hover");
hoverLabelState.properties.fill = am4core.color("#C0C0C0");

To desable the old labels:

categoryAxis.renderer.labels.template.adapter.add("textOutput", function(text
                                                                  {return "";});