Individual legend item for each column in series

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();
    }
  }
});

Demos

Column series

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

Line series with bullets

Using Line series with bullets will require a more elaborate setup. The following demo has the code.

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