title: Is it possible to show tooltip on category name with Amchart v4?
body: <p>I am using 'variable-radius-radar' from Amchart V4. I want to display tooltip on hover of category name, but could not find any solution. The tooltip is needed because the name can be very long. On the chart I am planning to display only first 10 characters of category. Tooltip will have the full name. </p>
  
  <p>Created a page on <a href="https://codepen.io/pzombade/pen/RExzbj?editors=0010" rel="noreferrer">https://codepen.io/pzombade/pen/RExzbj?editors=0010</a></p>
  
  <p><a href="https://i.stack.imgur.com/3DFcN.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3DFcN.png" alt="enter image description here"></a></p>
  
  <p>The code:</p>
  
  <pre><code>var chart = am4core.create("chartdiv", am4charts.RadarChart);
  chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
  
  var label = chart.createChild(am4core.Label);
  label.text = "Drag slider to change radius";
  label.exportable = false;
  
  chart.data = [
    {
      category: "One",
      value1: 8,
      value2: 2,
      value3: 4,
      value4: 3
    },
    {
      category: "Two",
      value1: 11,
      value2: 4,
      value3: 2,
      value4: 4
    },
    {
      category: "Three",
      value1: 7,
      value2: 6,
      value3: 6,
      value4: 2
    },
    {
      category: "Four",
      value1: 13,
      value2: 8,
      value3: 3,
      value4: 2
    }
  ];
  chart.radius = am4core.percent(95);
  chart.startAngle = 270 - 180;
  chart.endAngle = 270 + 180;
  chart.innerRadius = am4core.percent(60);
  
  var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = "category";
  categoryAxis.renderer.labels.template.location = 0.5;
  categoryAxis.renderer.grid.template.strokeOpacity = 0.1;
  categoryAxis.renderer.axisFills.template.disabled = true;
  categoryAxis.mouseEnabled = true;
  
  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.tooltip.disabled = false;
  valueAxis.renderer.grid.template.strokeOpacity = 0.05;
  valueAxis.renderer.axisFills.template.disabled = true;
  valueAxis.renderer.axisAngle = 260;
  valueAxis.renderer.labels.template.horizontalCenter = "right";
  valueAxis.min = 0;
  
  var series1 = chart.series.push(new am4charts.RadarColumnSeries());
  series1.columns.template.radarColumn.strokeOpacity = 1;
  series1.name = "Series 1";
  series1.dataFields.categoryX = "category";
  series1.columns.template.tooltipText = "{name}: {valueY.value}";
  series1.dataFields.valueY = "value1";
  series1.stacked = true;
  
  var series2 = chart.series.push(new am4charts.RadarColumnSeries());
  series2.columns.template.radarColumn.strokeOpacity = 1;
  series2.columns.template.tooltipText = "{name}: {valueY.value}";
  series2.name = "Series 2";
  series2.dataFields.categoryX = "category";
  series2.dataFields.valueY = "value2";
  series2.stacked = true;
  
  var series3 = chart.series.push(new am4charts.RadarColumnSeries());
  series3.columns.template.radarColumn.strokeOpacity = 1;
  series3.columns.template.tooltipText = "{name}: {valueY.value}";  
  series3.name = "Series 3";
  series3.dataFields.categoryX = "category";
  series3.dataFields.valueY = "value3";
  series3.stacked = true;
  
  chart.seriesContainer.zIndex = -1;
  
  var slider = chart.createChild(am4core.Slider);
  slider.start = 0.5;
  slider.exportable = false;
  slider.events.on("rangechanged", () =&gt; {
    var start = slider.start;
    chart.startAngle = 270 - start * 179 - 1;
    chart.endAngle = 270 + start * 179 + 1;
    valueAxis.renderer.axisAngle = chart.startAngle;
  });
  </code></pre>