Search nx-ui

Jump to any foundation, component, block or example.

Overview
  • Home
  • Components
  • Documentation
  • Brand iconsNew
  • ColoursNew
  • IconsNew
  • ShadowsNew
  • Theme matrixNew
  • TypographyNew
  • Activity FeedNew
  • App BreadcrumbsNew
  • App ShellNew
  • App SidebarNew
  • App SwitcherNew
  • Auth LoginNew
  • Auth RecoveryNew
  • Auth SignupNew
  • Avatar GroupNew
  • Calendar ViewNew
  • Device MockupNew
  • Empty StateNew
  • Error PageNew
  • Featured IconNew
  • Filter BarNew
  • KanbanNew
  • Media PlayerNew
  • Metric CardNew
  • Notification CentreNew
  • Nx LogoNew
  • Onboarding ChecklistNew
  • Org SwitcherNew
  • Page HeaderNew
  • Pricing TableNew
  • Scoped NavNew
  • Scroll FadeNew
  • SettingsNew
  • Sidebar NavNew
  • Theme ToggleNew
  • User MenuNew
  • InvoicesNew
  • Waste movementsNew
  • OrganisationsNew
  • AreaNew
  • BarNew
  • ComposedNew
  • Donut & pieNew
  • InteractiveNew
  • LineNew
  • Radial & gaugeNew
  • SparklinesNew
  • Chain Of CustodyNew
  • Compliance ChecklistNew
  • Ewc SelectorNew
  • Location SelectorNew
  • Material SelectorNew
  • Movement FormNew
  • OpportunitiesNew
  • Permit BadgeNew
  • Project Scope SelectorNew
  • Transfer NoteNew
  • Control RoomNew
  • DashboardNew
  • Empty statesNew
  • Forgot passwordNew
  • MaintenanceNew
  • MarketplaceNew
  • Movement detailNew
  • MovementsNew
  • 404 — Not foundNew
  • Onboarding wizardNew
  • OpportunitiesNew
  • Scoped appNew
  • 500 — Server errorNew
  • Settings — BillingNew
  • Settings — ProfileNew
  • Settings — TeamNew
  • Sign inNew
  • Sign upNew
  • BackdropNew
  • Background PatternsNew
  • Cta BannerNew
  • FaqNew
  • Feature CardNew
  • Feature RowNew
  • Grid BackdropNew
  • Hero SplitNew
  • How It WorksNew
  • Logo CloudNew
  • MotionNew
  • Page HeroNew
  • SectionNew
  • Site FooterNew
  • Site HeaderNew
  • Stats BandNew
  • TestimonialsNew
  • ArtifactNew
  • Chain of ThoughtNew
  • ChatNew
  • CheckpointNew
  • Code BlockNew
  • ConfirmationNew
  • ContextNew
  • ConversationNew
  • ImageNew
  • Inline CitationNew
  • LoaderNew
  • MessageNew
  • Model SelectorNew
  • Open in ChatNew
  • PlanNew
  • Prompt InputNew
  • QueueNew
  • ReasoningNew
  • ShimmerNew
  • SourcesNew
  • TaskNew
  • ToolNew
  • Web PreviewNew
  • WorkflowNew
  • Boundary MapNew
  • Camera & ToursNew
  • GlobeNew
  • IsochronesNew
  • Map MarkerNew
  • Map Stat OverlayNew
  • Map ToolbarNew
  • Map ViewNew
  • Route MapNew
  • RoutingNew
  • Site MapNew
  • 3D TerrainNew
  • Tilted RoutesNew
  • Transfer PreviewNew
  • Listing CardNew
  • Listings FiltersNew
  • Listings PanelNew
  • Marketplace MapNew
  • App-shell patternNew
  • Components & blocksNew
  • ContributingNew
  • Getting startedNew
  • ThemingNew
  1. Home
  2. Charts

Charts

Recharts examples built on the nx-ui chart tokens: line, area, bar, donut, radial, sparkline, composed and interactive charts — each wired through the ui/chart ChartContainer for themed colours, dark tooltips and legends.

Area
Stacked areas with gradient fills for cumulative trends.
Bar
Grouped, stacked and negative-value bar charts.
Composed
A composed bar-plus-line chart with dual axes.
Donut & pie
Donut charts with a centre KPI, plus a labelled pie.
Interactive
Brush-to-zoom and time-range toggling.
Line
Multi-series line charts with reference lines and a dotted target.
Radial & gauge
Radial progress rings and a half-circle gauge.
Sparklines
KPI cards with inline trend sparklines.