Brand logoentauri

Accessibility notes

Charts render visual data through Recharts. Pair them with titles, summaries, and table fallbacks when the data is critical.

Dependency notes

Requires recharts. Install it alongside Zentauri UI before using chart entries.

Charts

Line charts for trends over time

Plot one or more numeric series against a shared category or time axis. LineChart composes Recharts `Line` primitives with shared decorators for grid, axes, tooltip, and legend.

Appearance: glass | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Stroke: #ff0000 | Fill: #000000 | Label Color: white

Examples

Compare framing, density, legend, and stacking with the code tab.

Appearance: outline | Density: compact | Show Grid: true | Show Legend: true | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: muted | Density: spacious | Show Grid: false | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: muted | Density: spacious | Show Grid: false | Show Legend: false | Show Tooltip: true | Stacked: false | Stroke Dasharray: 5,5 | Outer Radius: 100% | Label Color: white

Chart frame variants

Each row pairs live output with JSX; the Variant line states the appearance token on the frame.

Appearance: default | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: muted | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: outline | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: glass | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: sky | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: emerald | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: violet | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: amber | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: rose | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: slate | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: gray | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: indigo | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: gradient-cyan-violet | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: gradient-emerald-violet | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: gradient-amber-rose | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: gradient-slate-gray | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: gradient-indigo-purple | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: gradient-cyan-blue | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: gradient-emerald-blue | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: gradient-amber-blue | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: default | Density: comfortable | Show Grid: false | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

What it does

Renders monotone lines with configurable grid, tooltip, and legend.

Control density and frame appearance with tokens instead of one-off CSS.

Data shape

Each row is an object; `xKey` names the categorical or ordinal field; numeric fields back each `series.dataKey`.

Common use cases

  • Revenue or usage trends by week.
  • Latency percentiles compared across environments.
  • Conversion funnels as simple step trends.

Accessibility

Provide meaningful `name` values for series so tooltips and legends read clearly.

Validate contrast for axes and labels against your chosen `appearance` background.

Next.js integration notes

Import from `@zentauri-ui/zentauri-components/charts/line` inside client components when interaction is required.

FAQ

How do I add another series?

Append an entry to `series` with a distinct `dataKey` that exists on each datum; optional `name` and palette `color` keys customize the legend and stroke.

Can lines share a sync id?

Pass `syncId` to coordinate tooltips or brushing across multiple charts that use the same identifier.