Legend

Use this guide when you need to configure the legend.

All charts that are grouped by using the groupByKey option will automatically generate a legend. The legend will display all group names and their corresponding colors.

The legend offers two ways of interaction. Users can filter groups from the chart by clicking on the legend items, or they can hover over a legend item to highlight the corresponding group in the chart.

This is the default behavior and needs no additional configuration.

Hiding the legend

The legend can be hidden by setting legend.isHidden to true.

const options = {
  legend: {
    isHidden: true,
  },
};

{
  "height": 300,
  "groupByKey": "name",
  "xAxis": {
    "dataKey": "date",
    "type": "time",
    "tickFormat": "%Y"
  },
  "yAxis": {
    "dataKey": "value",
    "type": "linear",
    "showGrid": true,
    "tickFormat": ".1%"
  },
  "tooltip": {
    "isEnabled": true,
    "undefinedLabel": "Keine Angabe"
  },
  "legend": {
    "isHidden": true
  }
}

Disable interactivity

Use legend.isInteractive to disable both the filtering and highlighting features of the legend.

const options = {
  legend: {
    isInteractive: false,
  },
};

{
  "height": 300,
  "groupByKey": "name",
  "xAxis": {
    "dataKey": "date",
    "type": "time",
    "tickFormat": "%Y"
  },
  "yAxis": {
    "dataKey": "value",
    "type": "linear",
    "showGrid": true,
    "tickFormat": ".1%"
  },
  "tooltip": {
    "isEnabled": true,
    "undefinedLabel": "Keine Angabe"
  },
  "legend": {
    "isInteractive": false
  }
}