Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Examples
  • Team activity
  • Recommendations
  • Usage boundaries
  • API reference

Charts

Chart Legend

A static, wrapping legend that shares chart series colors.

idle

Usage

import { ChartLegend } from "@mizen-labs/ui";

Examples

Team activity

Team activity

January–April 2026

Active teams in April
58
16 more than January
  • Active teams
  • New teams
Active and newly created teams from January through April.JanFebMarApr1020304050

Recommendations

GuidancePractice
Do

Match series names and colors to the plot. Keep legend ordering consistent across related charts.

Usage boundaries

GuidanceBoundary
Scope

This legend is static. Do not imply filtering or toggling unless the application provides those controls.

Scope

The legend describes series; it does not toggle their visibility.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
ChartLegendChartLegendPropsNative listRenders a static native list with an accessible name.
aria-labelstringRequiredNames the list of series.
itemsreadonly ChartLegendItem[]RequiredProvides stable item ids, visible labels, and semantic series tones.
variant"inline" | "tiles""inline"tiles shows each item in a surface tile with its value below the label.
items[].valueReactNodeNoneA total or current value shown with the item.
PreviousChart FrameNextChart Tooltip
  • Current year
  • Previous year