AmChart V4 : Clickable category axes labels (Stacked columns chart)

Question

I used amchart 4 to create a XYChart, more precisely a stacked columns chart, and I'd like to make the columns labels clickable. Here's what I did (with a little bit of twig) :

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

chart.data = [
    {
        'CategoryAxis' : 'Column label 1',
        {% for valueAxis in listValueAxes %}
            '{{ valueAxis.name }}': {{ valueAxis.numericalValue }},
        {% endfor %}
    },{
        'CategoryAxis' : 'Column label 2',
        {% for valueAxis in listValueAxes %}
            '{{ valueAxis.name }}': {{ valueAxis.numericalValue }},
        {% endfor %}
    }
];

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

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.labels.template.disabled = true;

var label = categoryAxis.renderer.labels.template;

function createSeries(field) {
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = field;
    series.dataFields.categoryX = "CategoryAxis";
    series.stacked = true;

    return series;
}

{% for valueAxis in listValueAxes %}
    series = createSeries('{{ valueAxis.name }}');
    // Clickable cells
    series.columns.template.url = "{{path('viewValueAxis', {'id':valueAxis.id})}}";
{% endfor %}

The last line with the url property allows to click on the "cells" of the columns and to be redirect to the page dedicated to the value that is represented. I'd like to make the label of the columns clickable as well. I tried to do something like this :

{% for categoryAxis in listCategoryAxes %}
    label.events.on("hit", function(){
        window.location.href = "{{path('viewCategoryAxis', {'id':categoryAxis.id})}}";
        }, this);
{% endfor %}

The problem is that the labels are not treated independantly and they redirect to the same page. I'd like to use the url property but where the target of the click is on the label instead of the column itself. I would have use something like series.columns.template.labels.url or maybe the urlTarget property but none of this seems to work.

Answer 1

If you have url's in your data, then the easiest way to do what you need is to set:

categoryAxis.renderer.labels.template.propertyFields.url = "url"

The same thing with hit event:

categoryAxis.renderer.labels.template.events.on("hit", function(event){
     window.location.href = event.target.dataItem.dataContext.url;
})