---
title: Bar Blocks
description: Ready-made bar chart blocks, powered by Apache ECharts
image: /og/og-image.png
---

## Peak Week

### Peak Week

```tsx
"use client";

import { EChartsBarChart, type ChartConfig } from "@/components/evilcharts/charts/echarts-bar-chart";
import { cn } from "@/lib/utils";

const chartData = [
  { week: "W01", organic: 128, paid: 74 },
  { week: "W02", organic: 164, paid: 91 },
  { week: "W03", organic: 142, paid: 66 },
  { week: "W04", organic: 199, paid: 108 },
  { week: "W05", organic: 176, paid: 84 },
  { week: "W06", organic: 231, paid: 167 },
  { week: "W07", organic: 208, paid: 96 },
  { week: "W08", organic: 287, paid: 158 },
  { week: "W09", organic: 244, paid: 112 },
  { week: "W10", organic: 196, paid: 88 },
  { week: "W11", organic: 221, paid: 103 },
  { week: "W12", organic: 173, paid: 79 },
];

const chartConfig = {
  organic: { label: "Organic", colors: { light: ["#7c3aed"], dark: ["#a78bfa"] } },
  paid: { label: "Paid", colors: { light: ["#0891b2"], dark: ["#22d3ee"] } },
} satisfies ChartConfig;

const LEGEND = [
  { key: "organic", label: "Organic", swatch: "bg-[#7c3aed] dark:bg-[#a78bfa]" },
  { key: "paid", label: "Paid", swatch: "bg-[#0891b2] dark:bg-[#22d3ee]" },
];

const PEAK = chartData.reduce(
  (best, row) => (row.organic + row.paid > best.organic + best.paid ? row : best),
  chartData[0],
);
const PEAK_TOTAL = PEAK.organic + PEAK.paid;

export function EChartsPeakBarChart() {
  return (
    <div className="flex h-full w-full flex-col p-4">
      <div className="flex items-start justify-between gap-4">
        <div className="flex flex-col gap-1">
          <span className="text-muted-foreground text-xs">Best week</span>
          <div className="flex items-baseline gap-2">
            <span className="text-primary text-2xl font-semibold tracking-tight sm:text-3xl">
              {PEAK_TOTAL}
            </span>
            <span className="text-muted-foreground text-sm">signups in {PEAK.week}</span>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-end gap-1.5 pt-1">
          {LEGEND.map(({ key, label, swatch }) => (
            <span
              key={key}
              className="text-muted-foreground flex items-center gap-2 text-[11px] sm:text-xs"
            >
              <span className={cn("size-2.5 shrink-0 rounded-[3px]", swatch)} />
              {label}
            </span>
          ))}
        </div>
      </div>

      <div className="mt-3 min-h-0 w-full flex-1">
        <EChartsBarChart
          data={chartData}
          config={chartConfig}
          xDataKey="week"
          className="h-full w-full"
          stackType="stacked"
          enableMaxValueHighlight
        >
          <EChartsBarChart.XAxis dataKey="week" hideDots />
          <EChartsBarChart.Tooltip />
          <EChartsBarChart.Bar dataKey="paid" radius={6} />
          <EChartsBarChart.Bar dataKey="organic" radius={6} />
        </EChartsBarChart>
      </div>
    </div>
  );
}

```
### npm

```bash
npx shadcn@latest add @evilcharts/peak-echarts-bar-chart
```

### yarn

```bash
yarn shadcn@latest add @evilcharts/peak-echarts-bar-chart
```

### bun

```bash
bunx --bun shadcn@latest add @evilcharts/peak-echarts-bar-chart
```

### pnpm

```bash
pnpm dlx shadcn@latest add @evilcharts/peak-echarts-bar-chart
```

## Grid Bar Chart

### Grid Bar Chart

```tsx
"use client";

import { EChartsBarChart, type ChartConfig } from "@/components/evilcharts/charts/echarts-bar-chart";

const chartData = [
  { hour: "00:00", sessions: 42 },
  { hour: "01:00", sessions: 28 },
  { hour: "02:00", sessions: 19 },
  { hour: "03:00", sessions: 14 },
  { hour: "04:00", sessions: 12 },
  { hour: "05:00", sessions: 18 },
  { hour: "06:00", sessions: 34 },
  { hour: "07:00", sessions: 66 },
  { hour: "08:00", sessions: 98 },
  { hour: "09:00", sessions: 124 },
  { hour: "10:00", sessions: 147 },
  { hour: "11:00", sessions: 163 },
  { hour: "12:00", sessions: 158 },
  { hour: "13:00", sessions: 171 },
  { hour: "14:00", sessions: 186 },
  { hour: "15:00", sessions: 174 },
  { hour: "16:00", sessions: 152 },
  { hour: "17:00", sessions: 138 },
  { hour: "18:00", sessions: 119 },
  { hour: "19:00", sessions: 96 },
  { hour: "20:00", sessions: 84 },
  { hour: "21:00", sessions: 71 },
  { hour: "22:00", sessions: 58 },
  { hour: "23:00", sessions: 47 },
];

const chartConfig = {
  sessions: {
    label: "Sessions",
    colors: {
      light: ["#18181b"],
      dark: ["#FFFFFF"],
    },
  },
} satisfies ChartConfig;

const TOTAL = chartData.reduce((sum, { sessions }) => sum + sessions, 0);
const PEAK = chartData.reduce(
  (max, row) => (row.sessions > max.sessions ? row : max),
  chartData[0],
);

export function EChartsGridBarChart() {
  return (
    <div className="flex h-full w-full flex-col p-4">
      <div className="flex flex-row justify-between">
        <div className="flex flex-row">
          <div className="flex flex-col gap-2">
            <span className="text-muted-foreground font-mono text-xs">{"[Σ] Total"}</span>
            <span className="text-primary font-mono text-3xl tracking-tighter">
              {TOTAL.toLocaleString()}
            </span>
          </div>
          <hr className="mx-4 h-full border-l border-dashed" />
          <div className="flex flex-col gap-2">
            <span className="text-muted-foreground font-mono text-xs">{"[⬆] Peak"}</span>
            <span className="text-primary font-mono text-3xl tracking-tighter">{PEAK.hour}</span>
          </div>
        </div>
        <div className="flex flex-col justify-end gap-1">
          <span className="text-muted-foreground font-mono text-[10px]">
            {"// CELL: "}
            <span className="text-primary">1:1</span>
          </span>
          <span className="text-muted-foreground font-mono text-[10px]">
            {"// TYPE: "}
            <span className="text-primary">GRID</span>
          </span>
        </div>
      </div>

      <hr className="my-4 border-t border-dashed" />

      <div className="min-h-0 w-full flex-1">
        <EChartsBarChart
          data={chartData}
          config={chartConfig}
          xDataKey="hour"
          className="h-full w-full"
          barCategoryGap={14}
        >
          <EChartsBarChart.XAxis dataKey="hour" hideDots />
          <EChartsBarChart.Tooltip />
          <EChartsBarChart.Bar dataKey="sessions" variant="blocks" />
        </EChartsBarChart>
      </div>
    </div>
  );
}

```
### npm

```bash
npx shadcn@latest add @evilcharts/grid-echarts-bar-chart
```

### yarn

```bash
yarn shadcn@latest add @evilcharts/grid-echarts-bar-chart
```

### bun

```bash
bunx --bun shadcn@latest add @evilcharts/grid-echarts-bar-chart
```

### pnpm

```bash
pnpm dlx shadcn@latest add @evilcharts/grid-echarts-bar-chart
```

## Monospace Bar Chart

### Monospace Bar Chart

```tsx
"use client";

import { EChartsBarChart, type ChartConfig } from "@/components/evilcharts/charts/echarts-bar-chart";

const chartData = [
  { month: "Jan '24", sales: 342 },
  { month: "Feb '24", sales: 876 },
  { month: "Mar '24", sales: 512 },
  { month: "Apr '24", sales: 629 },
  { month: "May '24", sales: 458 },
  { month: "Jun '24", sales: 781 },
  { month: "Jul '24", sales: 394 },
  { month: "Aug '24", sales: 925 },
  { month: "Sep '24", sales: 647 },
  { month: "Oct '24", sales: 532 },
  { month: "Nov '24", sales: 803 },
  { month: "Dec '24", sales: 271 },
  { month: "Jan '25", sales: 388 },
  { month: "Feb '25", sales: 912 },
  { month: "Mar '25", sales: 564 },
  { month: "Apr '25", sales: 671 },
  { month: "May '25", sales: 499 },
  { month: "Jun '25", sales: 838 },
  { month: "Jul '25", sales: 427 },
  { month: "Aug '25", sales: 968 },
  { month: "Sep '25", sales: 702 },
  { month: "Oct '25", sales: 585 },
  { month: "Nov '25", sales: 861 },
  { month: "Dec '25", sales: 314 },
];

const chartConfig = {
  sales: {
    label: "Sales",
    colors: {
      light: ["#18181b"],
      dark: ["#fafafa"],
    },
  },
} satisfies ChartConfig;

const TOTAL = chartData.reduce((sum, { sales }) => sum + sales, 0);
const TOP = chartData.reduce((max, row) => (row.sales > max.sales ? row : max), chartData[0]);

export function EChartsMonospaceBarChart() {
  return (
    <div className="flex h-full w-full flex-col p-4">
      <div className="flex flex-row justify-between">
        <div className="flex flex-row">
          <div className="flex flex-col gap-2">
            <span className="text-muted-foreground font-mono text-xs">{"[$] Total Sales"}</span>
            <span className="text-primary font-mono text-3xl">
              <span className="text-muted-foreground text-xl font-normal">$</span>
              <span className="tracking-tighter">{TOTAL.toLocaleString()}</span>
            </span>
          </div>
          <hr className="mx-4 h-full border-l border-dashed" />
          <div className="flex flex-col gap-2">
            <span className="text-muted-foreground font-mono text-xs">{"[⬆] Top Month"}</span>
            <span className="text-primary font-mono text-3xl tracking-tighter">{TOP.month}</span>
          </div>
        </div>
        <div className="flex flex-col justify-end gap-1">
          <span className="text-muted-foreground font-mono text-[10px]">
            {"// X-AXIS: "}
            <span className="text-primary">MONTHS</span>
          </span>
          <span className="text-muted-foreground font-mono text-[10px]">
            {"// Y-AXIS: "}
            <span className="text-primary">SALES</span>
          </span>
        </div>
      </div>

      <hr className="my-4 border-t border-dashed" />

      <div className="min-h-0 w-full flex-1">
        <EChartsBarChart
          data={chartData}
          config={chartConfig}
          xDataKey="month"
          className="h-full w-full"
        >
          <EChartsBarChart.XAxis
            dataKey="month"
            tickFormatter={(value) => value.slice(0, 3)}
            hideDots
          />
          <EChartsBarChart.Bar dataKey="sales" variant="expandable" />
        </EChartsBarChart>
      </div>
    </div>
  );
}

```
### npm

```bash
npx shadcn@latest add @evilcharts/monospace-echarts-bar-chart
```

### yarn

```bash
yarn shadcn@latest add @evilcharts/monospace-echarts-bar-chart
```

### bun

```bash
bunx --bun shadcn@latest add @evilcharts/monospace-echarts-bar-chart
```

### pnpm

```bash
pnpm dlx shadcn@latest add @evilcharts/monospace-echarts-bar-chart
```