# Stats with Area Chart

> A stats with area chart block.

A shadcn/ui block from the [@blocks-so](https://blocks.so) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blocks-so/stats-10).

- Page, with a live preview: https://shadcn.exchange/r/blocks-so/stats-10
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blocks-so/stats-10-light-de1a48e2ff3fae14.png
- Registry item: https://blocks.so/r/stats-10.json
- Categories: stats
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blocks.so/r/stats-10.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `recharts`
- Registry items: `card`, `chart`

## Files

### `content/components/stats/stats-10.tsx`

```tsx
'use client';

import { Area, AreaChart, XAxis } from 'recharts';
import { Card, CardContent } from '@/components/ui/card';
import { ChartContainer } from '@/components/ui/chart';
import { cn } from '@/lib/utils';

const data = [
  {
    date: 'Nov 24, 2023',
    'Alpha Corp': 142.87,
    'Beta Solutions': 65.32,
    'Gamma Industries': 83.25,
  },
  {
    date: 'Nov 25, 2023',
    'Alpha Corp': 151.43,
    'Beta Solutions': 59.78,
    'Gamma Industries': 79.64,
  },
  {
    date: 'Nov 26, 2023',
    'Alpha Corp': 157.28,
    'Beta Solutions': 64.21,
    'Gamma Industries': 76.19,
  },
  {
    date: 'Nov 27, 2023',
    'Alpha Corp': 162.94,
    'Beta Solutions': 57.46,
    'Gamma Industries': 72.84,
  },
  {
    date: 'Nov 28, 2023',
    'Alpha Corp': 148.37,
    'Beta Solutions': 49.82,
    'Gamma Industries': 81.56,
  },
  {
    date: 'Nov 29, 2023',
    'Alpha Corp': 139.56,
    'Beta Solutions': 55.63,
    'Gamma Industries': 92.38,
  },
  {
    date: 'Nov 30, 2023',
    'Alpha Corp': 145.83,
    'Beta Solutions': 61.27,
    'Gamma Industries': 88.75,
  },
  {
    date: 'Dec 01, 2023',
    'Alpha Corp': 138.29,
    'Beta Solutions': 68.94,
    'Gamma Industries': 93.42,
  },
  {
    date: 'Dec 02, 2023',
    'Alpha Corp': 129.64,
    'Beta Solutions': 74.56,
    'Gamma Industries': 97.18,
  },
  {
    date: 'Dec 03, 2023',
    'Alpha Corp': 119.82,
    'Beta Solutions': 71.38,
    'Gamma Industries': 89.43,
  },
  {
    date: 'Dec 04, 2023',
    'Alpha Corp': 128.54,
    'Beta Solutions': 63.95,
    'Gamma Industries': 92.76,
  },
  {
    date: 'Dec 05, 2023',
    'Alpha Corp': 137.21,
    'Beta Solutions': 58.47,
    'Gamma Industries': 84.29,
  },
  {
    date: 'Dec 06, 2023',
    'Alpha Corp': 134.68,
    'Beta Solutions': 69.12,
    'Gamma Industries': 79.38,
  },
  {
    date: 'Dec 07, 2023',
    'Alpha Corp': 152.73,
    'Beta Solutions': 73.89,
    'Gamma Industries': 81.42,
  },
  {
    date: 'Dec 08, 2023',
    'Alpha Corp': 168.59,
    'Beta Solutions': 78.54,
    'Gamma Industries': 75.68,
  },
];

const summary = [
  {
    name: 'Alpha Corp',
    tickerSymbol: 'ACP',
    value: '$168.59',
    change: '+15.86',
    percentageChange: '+10.4%',
    changeType: 'positive',
  },
  {
    name: 'Beta Solutions',
    tickerSymbol: 'BTS',
    value: '$78.54',
    change: '+4.65',
    percentageChange: '+6.3%',
    changeType: 'positive',
  },
  {
    name: 'Gamma Industries',
    tickerSymbol: 'GMI',
    value: '$75.68',
    change: '-5.74',
    percentageChange: '-7.1%',
    changeType: 'negative',
  },
];

const sanitizeName = (name: string) => {
  return name
    .replace(/\\s+/g, '-')
    .replace(/[^a-zA-Z0-9-]/g, '_')
    .toLowerCase();
};

export default function Stats10() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <dl className="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {summary.map((item) => {
          const sanitizedName = sanitizeName(item.name);
          const gradientId = `gradient-${sanitizedName}`;

          const color =
            item.changeType === 'positive'
              ? 'hsl(142.1 76.2% 36.3%)'
              : 'hsl(0 72.2% 50.6%)';

          return (
            <Card className="overflow-hidden p-0 shadow-2xs" key={item.name}>
              <CardContent className="p-0">
                <div className="p-4 pb-0">
                  <dt className="font-medium text-foreground text-sm">
                    {item.name}{' '}
                    <span className="font-normal text-muted-foreground">
                      ({item.tickerSymbol})
                    </span>
                  </dt>
                  <div className="flex items-baseline justify-between">
                    <dd
                      className={cn(
                        item.changeType === 'positive'
                          ? 'text-green-600 dark:text-green-500'
                          : 'text-red-600 dark:text-red-500',
                        'font-semibold text-lg'
                      )}
                    >
                      {item.value}
                    </dd>
                    <dd className="flex items-center space-x-1 text-sm">
                      <span className="font-medium text-foreground">
                        {item.change}
                      </span>
                      <span
                        className={cn(
                          item.changeType === 'positive'
                            ? 'text-green-600 dark:text-green-500'
                            : 'text-red-600 dark:text-red-500'
                        )}
                      >
                        ({item.percentageChange})
                      </span>
                    </dd>
                  </div>
                </div>

                <div className="mt-2 h-16 overflow-hidden">
                  <ChartContainer
                    className="h-full w-full"
                    config={{
                      [item.name]: {
                        label: item.name,
                        color,
                      },
                    }}
                  >
                    <AreaChart
                      data={data}
                      margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
                    >
                      <defs>
                        <linearGradient
                          id={gradientId}
                          x1="0"
                          x2="0"
                          y1="0"
                          y2="1"
                        >
                          <stop
                            offset="5%"
                            stopColor={color}
                            stopOpacity={0.3}
                          />
                          <stop
                            offset="95%"
                            stopColor={color}
                            stopOpacity={0}
                          />
                        </linearGradient>
                      </defs>
                      <XAxis dataKey="date" hide={true} />
                      <Area
                        dataKey={item.name}
                        fill={`url(#${gradientId})`}
                        fillOpacity={0.4}
                        stroke={color}
                        strokeWidth={1.5}
                        type="monotone"
                      />
                    </AreaChart>
                  </ChartContainer>
                </div>
              </CardContent>
            </Card>
          );
        })}
      </dl>
    </div>
  );
}
```