CODEWITHSUNDEEP
javascriptamcharts4
Mahesh
Mahesh

Reputation: 441

With Amcharts 4, looking for a solution to show hide columns in bar charts where each legend represents a column

Is there a way to hide / show columns in a bar chart by clicking on legends ? Specifically, when each legend represents a column in the bar chart, as shown in the example here.

There is custom solution found in here, and is a very good start. But this is with AmCharts v3 and I am looking for AmCharts v4 with an approach where -

Thanks

Upvotes: 0

Views: 680

Answers (1)

Mahesh
Mahesh

Reputation: 441

(NOTE - The solution was provided by zeroin. I am merely quoting in here, so to be helpful for someone who requires this behaviour in AmCharts 4)

Here is the link with the complete solution - https://codepen.io/team/amcharts/pen/bGNyXod

Basically, subscribing for the event dataitemsvalidated and toggled (on legend.itemContainers) did the work.

Relevant code snippet -

series.events.on("dataitemsvalidated", function(){
  var data = [];
  series.dataItems.each(function(dataItem){
    data.push({name:dataItem.categoryX, fill:dataItem.column.fill, dataItem:dataItem});
  })
  legend.data = data;
})

legend.itemContainers.template.events.on("toggled", function(event) {    
  if(event.target.isActive){
    event.target.dataItem.dataContext.dataItem.hide(series.interpolationDuration, 0, 0, ["valueY"]);
  }
  else{
    event.target.dataItem.dataContext.dataItem.show(series.interpolationDuration, 0, ["valueY"]);
  }
})

Hope this helps.

Upvotes: 0

Related Questions