Grouping legend items

This short tutorial will introduce two approaches that can be used to group legend items by inserting a label between its items.

Approach #1

The easiest approach is to create a legend like we would do on any chart, set its data, then insert Label elements at predefined places in legend’s children list.

function insertLegendLabel(text, index) {
  let label = legend.children.insertIndex(index, am5.Label.new(root, {
    text: text,
    fontWeight: "bold",
    paddingLeft: 0
  }));
}

insertLegendLabel("Third group", 4);
insertLegendLabel("Second group", 2);
insertLegendLabel("First group", 0);

function insertLegendLabel(text, index) {
  var label = legend.children.insertIndex(index, am5.Label.new(root, {
    text: text,
    fontWeight: "bold",
    paddingLeft: 0
  }));
}

insertLegendLabel("Third group", 4);
insertLegendLabel("Second group", 2);
insertLegendLabel("First group", 0);

The downside to this approach is that we need to know specific indexes to insert labels at.

We also need to take into account that after inserting a new child (label), the indexes of the elements that go below it will shift up, hence the reversed order in the code above.

Open in CodePen

Approach #2

This approach is more sophisticated, and thus requires more steps.

First, we create a Container that will act as a placeholder for our multiple legends.

Then we create a Label and a Legend element for each group, which we then push into container’s children.

let legendContainer = chart.children.unshift(am5.Container.new(root, {
  centerY: am5.p50,
  y: am5.p50,
  layout: root.verticalLayout
}));

function createLegend(heading, items) {
  let label = legendContainer.children.push(am5.Label.new(root, {
    text: heading,
    fontWeight: "bold",
    paddingLeft: 0
  }));

  let legend = legendContainer.children.push(
    am5.Legend.new(root, {
      layout: root.verticalLayout
    })
  );

  legend.data.setAll(items);
}

createLegend("First group", [series1, series2]);
createLegend("Second group", [series3, series4]);
createLegend("Third group", [series5, series6]);

var legendContainer = chart.children.unshift(am5.Container.new(root, {
  centerY: am5.p50,
  y: am5.p50,
  layout: root.verticalLayout
}));

function createLegend(heading, items) {
  var label = legendContainer.children.push(am5.Label.new(root, {
    text: heading,
    fontWeight: "bold",
    paddingLeft: 0
  }));

  var legend = legendContainer.children.push(
    am5.Legend.new(root, {
      layout: root.verticalLayout
    })
  );

  legend.data.setAll(items);
}

createLegend("First group", [series1, series2]);
createLegend("Second group", [series3, series4]);
createLegend("Third group", [series5, series6]);

This allows more control and leaves less chance for an error.

Open in CodePen