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.

TypeScript
JavaScript

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.

TypeScript
JavaScript

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

Line series with bullets

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