ChartDomainLegend

First item
Second item

Color

The color scheme is determined through the colorScheme prop.

Access
Use
Innovation
Jobs
Society
Trust
Market openness

Context

The context label is shown above the items and should explain the domain, if that is not clear from the chart title.

Context
First item
Second item

For example if the bars represent imports and the symbols represent exports, place two <ChartDomainLegend>s adjacent to each other each with a different context label:

Imports
First area
Second area
Third area
Exports
First symbol
Second symbol

Common Prefix

When all the items have a common prefix of at least two words, the prefix is extracted to avoid repetition. A colon (:) character is appended to the prefix, unless the extracted prefix already ends with one.

Enterprises have undertaken cross-border e-commerce sales to:
the rest of the world exclusively
both EU and the rest of the world
EU countries exclusively
Common prefix is extracted into a leading label.
Perception of AI:
Positive
Neither positive nor negative
Negative
Common prefix that already contains a colon.

Area vs. Symbol vs. Line

Set kind to "area", "symbol", or "line" to change how the domain values are encoded.

FIRST ITEM
SECOND ITEM
area
FIRST ITEM
SECOND ITEM
symbol
FIRST ITEM
SECOND ITEM
line

Single-item legend

For single-item legends, you have the option to use regular color or a faded shade. This is used in charts which combine bars + dumbbells (when dumbbells are shown the bar uses the faded shade).

FIRST ITEM
Regular
FIRST ITEM
Faded

Note: Setting faded to true or false will not work when the domain has more than one item. When that prop is set, it forces all colors to be the same.

Do not
Use faded together
With multi-item domains
Example of wrong combination of faded with a multi-item domain.
Previous
ChartAxes
Next
ChartHeader