Skip to content
Tattva

ChartLegend

Stable

A key that explains each color, dash and marker in a chart, in the chart's order. It can also switch lines on and off.

Also known as legend, key

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

A key with dashes and dots

  • North shop
  • East shop
  • West shop
  • Online

The first two lines are solid with round dots. From the third on, the dash and dot shape change too, not only the color.

UsageCodeDesignAccessibility

When to use it

A key that shows the same color, dash and marker as each line or bar, in the chart's order. It can also turn lines on and off.

Made of: Sample (line with dot, or color block) · Name

Use it for

  • One key shared by several charts.
  • A custom layout where the key sits apart from the chart.
  • Letting people show or hide lines: pass onToggle.

Not for

  • A chart with only one line. The title names it.
  • A LineChart or stacked BarChart on its own. They draw their own key.

Do and avoid

  • This year
  • Last year
  • Target
Do. Each name has its own mark and dash, not just a color.

Orders per day

Orders, Mon to Fri

  • Orders
Avoid. A key for one line only repeats what the title says.

Do

  • Show a key for two or more lines, and none for one.
  • Keep the key in the same order as the lines or stack.
  • Let a hidden line keep its color. Hiding one line must not recolor the others.
  • Hide the line in the chart when its item is turned off. The key only tells you through onToggle.

Avoid

  • Don't color the name text. The sample beside it shows which is which.
  • Don't make the key the only way to tell lines apart. With four or fewer, name the lines at their ends too.
  • Don't add a key for one line. The title names it.

On a phone

  • The legend wraps onto more lines when the chart is narrow.
  • When the items are toggle buttons they are 24px tall. On touch screens they keep that size and have a 44px tap area.

Seen in products

  • PatternFly ships its charts with interactive legends, reported in the Supernova roundup.
  • Carbon says the legend should define each visual property.
  • The UK Analysis Function checklist says legend order matches chart order.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started