# Chart 02 - Total Orders Chart

> Display total sales in an easy-to-read chart for quick business insights. Great for ecommerce dashboards, order management systems, and sales reports.

A shadcn/ui block from the [@shadcn-dashboard](https://shadcndashboard.dev) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-dashboard/total-orders-chart).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-dashboard/total-orders-chart
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-dashboard/total-orders-chart-light-1d7de0ddbf244fe5.png
- Registry item: https://shadcndashboard.dev/r/total-orders-chart.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcndashboard.dev/r/total-orders-chart.json
```

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

## Dependencies

- Registry items: `card`, `badge`, `chart`

## Files

### `src/components/shadcn-dashboard/blocks/charts/total-orders-chart.tsx`

```tsx
"use client";

import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Bar, BarChart, ResponsiveContainer, XAxis } from "recharts";
import {
  ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";

function TotalOrdersCode() {
  const chartData = [
    { month: "1", salesA: 110, salesB: 60 },
    { month: "2", salesA: 120, salesB: 90 },
    { month: "3", salesA: 119, salesB: 80 },
    { month: "4", salesA: 139, salesB: 70 },
    { month: "5", salesA: 149, salesB: 100 },
    { month: "6", salesA: 170, salesB: 80 },
    { month: "7", salesA: 200, salesB: 150 },
    { month: "8", salesA: 190, salesB: 130 },
    { month: "9", salesA: 170, salesB: 130 },
    { month: "10", salesA: 165, salesB: 110 },
  ];

  const chartConfig = {
    salesA: {
      label: "salesA",
      color: "var(--color-primary)",
    },
    salesB: {
      label: "salesB",
      color: "var(--color-primary)",
    },
  } satisfies ChartConfig;

  return (
    <div className="w-full max-w-lg ">
      <Card className="">
        <CardContent className="flex flex-col gap-4  sm:flex-row sm:items-end sm:justify-between">
          <div className="flex flex-col gap-1.5">
            <p className="text-sm font-normal text-muted-foreground">
              Total sales
            </p>
            <div className="flex flex-col gap-1.5">
              <h3 className="text-2xl font-semibold">$45,320.75</h3>
              <div className="flex items-center gap-2">
                <p className="text-sm font-normal text-muted-foreground">
                  -$1,470
                </p>
                <Badge className="bg-chart-2/10 text-chart-2">-18%</Badge>
              </div>
            </div>
          </div>
          <ChartContainer
            config={chartConfig}
            className="h-20 w-full min-w-0 sm:max-w-50"
          >
            <BarChart
              accessibilityLayer
              data={chartData}
              barGap={-6}
            
            >
              <XAxis dataKey="month" hide />
              <ChartTooltip
                cursor={false}
                content={<ChartTooltipContent hideLabel />}
              />
              <Bar
                dataKey="salesA"
                fill="var(--color-salesA)"
                opacity={0.4}
                radius={[10, 10, 10, 10]}
                barSize={6}
              />
              <Bar
                dataKey="salesB"
                fill="var(--color-salesA)"
                radius={[10, 10, 10, 10]}
                barSize={6}
              />
            </BarChart>
          </ChartContainer>
        </CardContent>
      </Card>
    </div>
  );
}

export default TotalOrdersCode;
```