Chart

Brand-styled chart components built on Recharts. Includes bar, line, area, and pie variants with a consistent design language.

When To Use

Use Chart when information needs to be scanned quickly and compared across multiple rows, cards, or values.
Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.

When Not To Use

Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.

Accessibility Notes

Preserve table semantics for tabular data and avoid flattening structured information into generic divs.
Use clear headings, summaries, and labels so assistive technologies can announce the data in context.
Do not rely on color alone to communicate trend, status, or state in charts and metric cards.

Key Props / API

Props

children, className, height, labelClassName

Key exports

ChartContainer, ChartTooltip, CHART_COLORS

Example Code

import {
  ChartContainer, ChartTooltip, CHART_COLORS,
  BarChart, Bar, CartesianGrid, XAxis, YAxis, RechartsTooltip,
} from "@hilum/ui";

<ChartContainer height={280}>
  <BarChart data={monthlyData}>
    <CartesianGrid strokeDasharray="3 3" stroke="#f2eeea" />
    <XAxis dataKey="month" tick={{ fill: "#a8978a", fontSize: 12 }} axisLine={false} tickLine={false} />
    <YAxis tick={{ fill: "#a8978a", fontSize: 12 }} axisLine={false} tickLine={false} />
    <RechartsTooltip content={<ChartTooltip />} />
    <Bar dataKey="revenue" fill={CHART_COLORS.primary} radius={[4, 4, 0, 0]} />
  </BarChart>
</ChartContainer>

Chart

Bar Chart

Monthly revenue as grouped bars

Monthly Revenue

Line Chart

User growth over time as a continuous line

User Growth

Area Chart

Weekly sessions vs. bounces with filled gradient areas

Weekly Traffic

Donut Chart

Category breakdown with a custom legend

Team Breakdown

Design38%

Engineering30%

Marketing18%

Sales14%

Grouped Bar Chart

Revenue and conversions compared side-by-side

Revenue vs Conversions