Chart templates

Dashboard-ready chart and KPI layouts built on Recharts: hero area, grouped bars, ranked lists, category bars, metric sparklines, and attention lists. Pass your data and copy the pattern.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview
Total volume
₹8,47,250.00
+8.4% vs last month
Success rate
94.20%
+1.2% vs last month
Avg. ticket size
₹2,475.00
−3.1% vs last month
Failed
2
−50% vs last month

Gross volume

₹9,42,800 INR
+14.1% vs yesterday

Upcoming settlement: ₹1,24,890

Payment success rate

94.2%
Successful1,240
Failed78
Avg. value₹2,120

Needs attention

  • Funds on hold

    ₹48,200

    12 transactions

  • Open disputes

    3

    Due this week

Monthly volume

Payment volume vs settlements

Volume
Settled

Settlement speed (T+N)

% of volume by working-day lag

Country insights

Share of volume

  • INIndia
    ₹4.1L
  • USUnited States
    ₹3.1L
  • GBUnited Kingdom
    ₹1.8L
  • SGSingapore
    ₹1.2L

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import {
  MetricSparklineCard,
  DashboardAreaChartTemplate,
  GroupedBarChartTemplate,
  RankedBarListTemplate,
  CategoryBarChartTemplate,
  MiniSparklineChartCard,
  AttentionListTemplate,
} from "@payglocal_ui/flux-ui";

Example

// Compose templates with your data; each component is a styled card + chart.
<DashboardAreaChartTemplate
  title="Gross volume"
  tabs={[{ id: "gross", label: "Gross volume" }]}
  activeTabId="gross"
  onTabChange={() => {}}
  headline="₹9,42,800"
  data={series}
  xKey="hour"
  areaKey="amount"
  compareLineKey="yesterday"
/>

<MetricSparklineCard
  title="Total volume"
  value="₹8,47,250"
  trend={{ direction: "up", label: "+8.4% vs last month" }}
  data={sparkPoints}
/>