title: AmChart V4 : Clickable category axes labels (Stacked columns chart)
body: <p>I used amchart 4 to create a <a href="https://www.amcharts.com/docs/v4/chart-types/xy-chart/" rel="nofollow noreferrer">XYChart</a>, 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) :</p>
  
  <pre><code>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 %}
  </code></pre>
  
  <p>The last line with the <code>url</code> 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 :</p>
  
  <pre><code>{% for categoryAxis in listCategoryAxes %}
      label.events.on("hit", function(){
          window.location.href = "{{path('viewCategoryAxis', {'id':categoryAxis.id})}}";
          }, this);
  {% endfor %}
  </code></pre>
  
  <p>The problem is that the labels are not treated independantly and they redirect to the same page. I'd like to use the <code>url</code> property but where the target of the click is on the label instead of the column itself. I would have use something like <code>series.columns.template.labels.url</code> or maybe the <code>urlTarget</code> <a href="https://www.amcharts.com/docs/v4/reference/axislabel/#urlTarget_property" rel="nofollow noreferrer">property</a> but none of this seems to work.</p>