Chart

Chart provides a styled container surface for charting libraries (for example, Recharts) so visualizations look consistent with other data-display components.

When to use

• Wrap chart primitives in a shared visual container.
• Keep chart spacing, border, and radius consistent across views.
• Embed compact visualizations in cards, dashboards, and data-grid details.

Behavior notes

• Chart is intentionally presentational and does not implement plotting logic.
• Pass sizing through className (for example h-72, w-full) to control chart dimensions.
• Provide chart semantics and accessibility at the visualization layer (aria-label, legends, tooltips, etc.).

Example

<Chart className='h-72 w-full'>
  <ResponsiveContainer width='100%' height='100%'>
    <LineChart data={data}>
      <CartesianGrid strokeDasharray='3 3' />
      <XAxis dataKey='month' />
      <YAxis />
      <Tooltip />
      <Line type='monotone' dataKey='usage' stroke='var(--chart-1)' />
    </LineChart>
  </ResponsiveContainer>
</Chart>

Related components

• Use DataGrid for interactive tabular exploration with optional card views.
• Use Card when the visualization needs surrounding metadata and actions.

Preview

Usage

'use client';

import {
  CartesianGrid,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  type TooltipProps,
  XAxis,
  YAxis,
} from 'recharts';
import type {
  NameType,
  ValueType,
} from 'recharts/types/component/DefaultTooltipContent';

import { Chart } from '@branditdev/ui';

const chartData = [
  { month: 'Jan', usage: 240 },
  { month: 'Feb', usage: 310 },
  { month: 'Mar', usage: 280 },
  { month: 'Apr', usage: 390 },
  { month: 'May', usage: 430 },
  { month: 'Jun', usage: 470 },
];

function ChartTooltipContent({
  active,
  payload,
  label,
}: TooltipProps<ValueType, NameType>) {
  if (!active || !payload?.length) {
    return null;
  }

  const value = payload[0]?.value;

  return (
    <div className='bg-foreground text-background animate-in fade-in-0 zoom-in-95 z-50 w-fit rounded-md px-3 py-1.5 text-xs'>
      <p className='text-background/80'>{label}</p>
      <p className='font-medium'>Usage: {value}</p>
    </div>
  );
}

export function ChartDemo() {
  return (
    <div className='w-full'>
      <Chart className='h-72 w-full'>
        <ResponsiveContainer width='100%' height='100%'>
          <LineChart
            data={chartData}
            margin={{ top: 8, right: 16, left: 4, bottom: 8 }}
          >
            <CartesianGrid strokeDasharray='3 3' className='stroke-border/60' />
            <XAxis dataKey='month' tickLine={false} axisLine={false} />
            <YAxis tickLine={false} axisLine={false} width={36} />
            <Tooltip
              cursor={{ stroke: 'var(--border)' }}
              content={<ChartTooltipContent />}
            />
            <Line
              type='monotone'
              dataKey='usage'
              stroke='var(--chart-1)'
              strokeWidth={2.5}
              dot={{ r: 3 }}
              activeDot={{ r: 5 }}
            />
          </LineChart>
        </ResponsiveContainer>
      </Chart>
    </div>
  );
}

API

Chart(props): Element

Defined in: components/chart/chart.tsx:14

Chart UI component.

Parameters

Returns

Element

Rendered component.

Source

import type { ComponentProps } from 'react';

import { cn } from '@branditdev/ui';

export type ChartProps = ComponentProps<'div'>;

export function Chart({ className, children, ...props }: ChartProps) {
  return (
    <div
      className={cn('rounded-md border border-border/50 p-4', className)}
      {...props}
    >
      {children || 'Chart'}
    </div>
  );
}