#StackBounty: #javascript #bar-chart #amcharts4 Amchart 4: How to highlight bar/column on click of bar/column in bar plots

Bounty: 50

I am trying to highlight the bar/column on click of bar/column in Amchart 4. Using the below code, I am getting the value of current clicked bar/column but using the column.isActive property, the bar/column is not getting highlighted.

I found this Amchart official Documentation link, but it is about on click of axis label. I am trying to implement the same but on click of bar/column, not axis label.

This is the code implementation:

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
}];

// Create axes

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

categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
  if (target.dataItem && target.dataItem.index & 2 == 2) {
    return dy + 25;
  }
  return dy;
});

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 = .8;

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

// Make a panning cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panXY";
chart.cursor.snapToSeries = series;

chart.events.on("hit", function(ev){
 chart.series.each(function(series) {
     if (series instanceof am4charts.ColumnSeries) {
       series.columns.each(function(column) {
         if (column.dataItem.categories.categoryX == series.tooltipDataItem.dataContext.country) {           
           console.log(column.dataItem.categories.categoryX, series.tooltipDataItem.dataContext.country);
           column.isActive = true;
         } else {
           column.isActive = false;
         }
       })
     }
   })
})
}); // end am4core.ready()

Now, I also found this stackoverflow post link, but that was related to the Amchart version 3 libraray and I am using Amchart 4.

Kindly check this jfiddle implementation.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.