Skip to content
amCharts 5

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

Section titled “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);

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

Demos

Section titled “Demos”

Column series

Section titled “Column series”
Open in CodePen

Line series with bullets

Section titled “Line series with bullets”

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

Open in CodePen