Amcharts4 - How to show/hide individual column categoryAxis label?

Question

I am using Amcharts4 to generate a column chart. I have hidden all axis labels on categoryAxis using this code:

categoryAxis.renderer.labels.template.hide();

When a particular column is hovered over, I would like to display the axis label on categoryAxis corresponding to that column only. I have attempted to use this code, but it enables/disables all of the labels at once, not the particular column for which I want to enable/disable the axis label.

function showLabels(ev){
categoryAxis.renderer.labels.template.show();
}

function hideLabels(ev){
categoryAxis.renderer.labels.template.hide();
}

series.columns.template.events.on("over", showLabels, this);
series.columns.template.events.on("out", hideLabels, this);

I need some way to reference an individual column. I'm guessing that I have to use ev.target and dataItem or dataContext for this, but I'm not really sure. Can anyone help me out?

Answer 1

I am not familiar with this library but find this question quite interesting so hope the below answer can help you.

The below code is the core part of how to hide and show the individual label:

chart.events.on('ready', () => {
    // hide all label when the chart is ready on DOM
    categoryAxis.renderer.labels.values.forEach((v) => v.visible = false)
});

function showLabels(ev) {
  // find the current selected column index and make the label visible
  const columnIndex = ev.target.dataItem.index + 1;
  categoryAxis.renderer.labels.values[columnIndex].visible = true;
}

function hideLabels(ev) {
  // find the current selected column index and make the label invisible
  const columnIndex = ev.target.dataItem.index + 1;
  categoryAxis.renderer.labels.values[columnIndex].visible = false;
}

series.columns.template.events.on("over", showLabels, this);
series.columns.template.events.on("out", hideLabels, this);

Attached Code snippet for you to play with:

am4core.ready(function () {
        // Themes begin
        am4core.useTheme(am4themes_animated);
        // Themes end

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

        // Add data
        chart.data = [
          {
            country: "USA",
            visits: 2025,
          },
          {
            country: "China",
            visits: 1882,
          },
          {
            country: "Japan",
            visits: 1809,
          },
          {
            country: "Germany",
            visits: 1322,
          },
          {
            country: "UK",
            visits: 1122,
          },
          {
            country: "France",
            visits: 1114,
          },
          {
            country: "India",
            visits: 984,
          },
          {
            country: "Spain",
            visits: 711,
          },
          {
            country: "Netherlands",
            visits: 665,
          },
          {
            country: "Russia",
            visits: 580,
          },
          {
            country: "South Korea",
            visits: 443,
          },
          {
            country: "Canada",
            visits: 441,
          },
          {
            country: "Brazil",
            visits: 395,
          },
        ];

        // Create axes

        var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
        categoryAxis.dataFields.category = "country";
        categoryAxis.renderer.grid.template.location = 0;
        categoryAxis.renderer.minGridDistance = 30;

        var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

        // Create series
        var series = chart.series.push(new am4charts.ColumnSeries());
        series.dataFields.valueY = "visits";
        series.dataFields.categoryX = "country";
        series.name = "Visits";
        series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
        series.columns.template.fillOpacity = 0.8;

        var columnTemplate = series.columns.template;
        columnTemplate.strokeWidth = 2;
        columnTemplate.strokeOpacity = 1;

        /** [Start] - Hide/show Label **/
        chart.events.on('ready', () => {
            // hide all label when the chart is ready on DOM
            categoryAxis.renderer.labels.values.forEach((v) => v.visible = false)
        });

        function showLabels(ev) {
          // find the current selected column index and make the label visible
          const columnIndex = ev.target.dataItem.index + 1;
          categoryAxis.renderer.labels.values[columnIndex].visible = true;
        }

        function hideLabels(ev) {
          // find the current selected column index and make the label invisible
          const columnIndex = ev.target.dataItem.index + 1;
          categoryAxis.renderer.labels.values[columnIndex].visible = false;
        }
        
        series.columns.template.events.on("over", showLabels, this);
        series.columns.template.events.on("out", hideLabels, this);
        /** [End] - Hide/show Label */

      });

#chartdiv {
  width: 100%;
  height: 500px;
}

<div id="chartdiv"></div>
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>