Skip to content

Make charts legends customizable

Current situation

Currently our gitlab-ui charts legends are not rendered by echarts, and instead by a separate chart-legend component.

The chart-legend take their values from the series in the chart and hold the following configuration:

  • series.name to render a label
  • series.lineStyle.type & series.lineStyle.color to render a sample line
  • layout with values table | inline to render the two types of layout
  • Min / Max / Avg / Current values as additional information for tabular layout legends, max / avg for inline legends
  • clicking on the legend will hide/show the series

Proposal

In more complex situations, rendering the default series data may not reflect relevant information to users:

  • A series that added as a decorative element should not display as a legend.
  • A series should not be toggled from the charts, click handler should be customized.
  • A chart with several types of series (combining line and scatter) will only display a single kind of legend.
  • Min / Max / Avg / Current may not make sense for certain data sets, but other information should be visible.

A possible Minimum Viable Change

Hide/remove a certain legend from the chart with a "showLegend: false", so a given series is not enabled in the chart.

Edited by 🤖 GitLab Bot 🤖