Individual legend item for each column in series

This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.

This demo shows how we can create a legend to display individual items for each column in a column series, as well as trigger hovers.

Relevant code

As per legend data item docs, we are using series' dataItems list to feed the legend data, which produces an item for each column.

legend.data.setAll(chart.series.values);

legend.data.setAll(chart.series.values);

Additionally, we are adding pointerover and pointerout events on legend items to trigger hover (tooltip) on related column, when legend item is hovered.

legend.itemContainers.template.events.on("pointerover", function(e){
  let seriesDataItem = e.target.dataItem.dataContext;
  if (seriesDataItem) {
    let graphics = seriesDataItem.get("graphics");
    if (graphics) {
      graphics.hover();
    }
  }
});

legend.itemContainers.template.events.on("pointerout", function(e){
  let seriesDataItem = e.target.dataItem.dataContext;
  if (seriesDataItem) {
    let graphics = seriesDataItem.get("graphics");
    if (graphics) {
      graphics.unhover();
    }
  }
});

legend.itemContainers.template.events.on("pointerover", function(e){
  var seriesDataItem = e.target.dataItem.dataContext;
  if (seriesDataItem) {
    var graphics = seriesDataItem.get("graphics");
    if (graphics) {
      graphics.hover();
    }
  }
});

legend.itemContainers.template.events.on("pointerout", function(e){
  var seriesDataItem = e.target.dataItem.dataContext;
  if (seriesDataItem) {
    var graphics = seriesDataItem.get("graphics");
    if (graphics) {
      graphics.unhover();
    }
  }
});

Demo

See the Pen
Individual legend item for each column in series by amCharts team (@amcharts)
on CodePen.0