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)?
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 "";});