Skip to main content

Chart

Plots your data with tooltips, legends, and colors that track the theme.

import { Chart } from "@/fragments/ui";Source

Preview

<div style={{ width: '100%', height: 300 }}>
  <ChartContainer
    config={{
      revenue: { label: 'Revenue', color: 'var(--fui-color-accent)' },
      users: { label: 'Users', color: 'var(--fui-color-info)' },
    }}

Installation

npx @usefragments/cli add chart
pnpm add recharts

Writes src/fragments/ui/components/Chart plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Anatomy

Chart is a compound: import the root and reach its parts through dot notation.

  • Chart.Tooltip
  • Chart.TooltipContent
  • Chart.Legend
  • Chart.LegendContent
  • Chart.preload

Examples

Bar Chart

Fixed categories, compared by height — the safest default.

<div style={{ width: '100%', height: 300 }}>
  <ChartContainer
    config={{
      sessions: { label: 'Sessions', color: 'var(--fui-color-accent)' },
    }}
  >

Area Chart

The fill under the line stresses volume, not just direction.

<div style={{ width: '100%', height: 300 }}>
  <ChartContainer
    config={{
      revenue: { label: 'Revenue', color: 'var(--fui-color-accent)' },
    }}
  >

Pie Chart

Parts of one whole — keep it under six slices or it stops reading.

<div style={{ width: '100%', height: 300 }}>
  <ChartContainer
    config={{
      Chrome: { label: 'Chrome', color: 'var(--fui-color-accent)' },
      Firefox: { label: 'Firefox', color: 'var(--fui-color-info)' },
      Safari: { label: 'Safari', color: 'var(--fui-color-success)' },

API

Component props
Prop
Type
Default
Description
configRequiredobjectNot setChartConfig mapping data keys to labels/colors (optional icon per series)
childrenRequiredelementNot setA recharts chart component (LineChart, BarChart, etc.)
summarystringNot setNon-visual summary announced to assistive technology users
dataTablenodeNot setOptional accessible data table or textual fallback
styleobjectNot set—

Accessibility

  • accessibilityLayer is on by default
  • ChartConfig labels are what screen readers read
  • Pass dataTable to offer the same numbers as text

Guidance

Use when

  • A trend over time is the point
  • Categories need comparing side by side
  • A whole splits into parts worth seeing

Avoid when

  • One number tells the story (use Text or Badge)
  • Distance to a goal (use Progress)
  • Readers need exact values (use Table)

Related

  • CardparentCharts are typically placed inside Cards
  • ProgressalternativeUse Progress for single-value completion
  • TablesiblingCombine with Table for full data views

Next steps