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

## Payout Trend

### Payout Trend

```tsx
"use client";

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

const chartData = [
  { month: "Jan", payouts: 312, pending: 548 },
  { month: "Feb", payouts: 388, pending: 502 },
  { month: "Mar", payouts: 342, pending: 561 },
  { month: "Apr", payouts: 455, pending: 470 },
  { month: "May", payouts: 521, pending: 398 },
  { month: "Jun", payouts: 486, pending: 441 },
  { month: "Jul", payouts: 573, pending: 372 },
  { month: "Aug", payouts: 640, pending: 316 },
  { month: "Sep", payouts: 598, pending: 358 },
  { month: "Oct", payouts: 662, pending: 284 },
  { month: "Nov", payouts: 617, pending: 331 },
  { month: "Dec", payouts: 690, pending: 262 },
];

const chartConfig = {
  payouts: {
    label: "Payouts",
    colors: {
      light: ["#f97316", "#ec4899"],
      dark: ["#fb923c", "#f472b6"],
    },
  },
  pending: {
    label: "Pending",
    colors: {
      light: ["#0891b2", "#7c3aed"],
      dark: ["#22d3ee", "#a78bfa"],
    },
  },
} satisfies ChartConfig;

const STATS = [
  {
    key: "month",
    label: "Monthly",
    value: "$12,480",
    delta: "+8.4%",
    sub: "11,512 last month",
    swatch: "bg-[#f97316] dark:bg-[#fb923c]",
  },
  {
    key: "year",
    label: "Yearly",
    value: "$164,320",
    delta: "+3.1%",
    sub: "159,380 last year",
    swatch: "bg-[#ec4899] dark:bg-[#f472b6]",
  },
];

const CITIES = [
  { city: "Berlin", amount: "84,210" },
  { city: "Toronto", amount: "61,940" },
];

export function EChartsPayoutsLineChart() {
  return (
    <div className="flex h-full w-full flex-col px-3 pt-2 pb-1 sm:px-4 sm:pt-4 sm:pb-2">
      <div className="min-h-24 w-full flex-1 sm:min-h-0">
        <EChartsLineChart
          data={chartData}
          config={chartConfig}
          xDataKey="month"
          className="h-full w-full"
          curveType="monotone"
        >
          <EChartsLineChart.Grid />
          <EChartsLineChart.YAxis />
          <EChartsLineChart.Tooltip variant="frosted-glass" />
          <EChartsLineChart.Line dataKey="payouts" strokeVariant="solid" strokeWidth={2} glowing>
            <EChartsLineChart.ActiveDot variant="ping" />
          </EChartsLineChart.Line>
          <EChartsLineChart.Line dataKey="pending" strokeVariant="solid" strokeWidth={2} glowing>
            <EChartsLineChart.ActiveDot variant="ping" />
          </EChartsLineChart.Line>
        </EChartsLineChart>
      </div>

      <div className="mt-2 grid shrink-0 grid-cols-2 gap-3 sm:mt-3 sm:gap-4">
        {STATS.map(({ key, label, value, delta, sub, swatch }) => (
          <div key={key} className="flex flex-col gap-0.5">
            <span className="text-primary flex items-center gap-1.5 text-[10px] leading-3.5 font-medium sm:text-[11px] sm:leading-normal">
              <span className={cn("size-2 shrink-0 rounded-[3px]", swatch)} />
              {label}
            </span>
            <span className="text-primary text-xl leading-6 font-semibold tracking-tight sm:text-2xl sm:leading-8">
              {value}
            </span>
            <span className="flex items-center gap-1.5 text-[10px] leading-3.5 sm:text-[11px] sm:leading-normal">
              <span className="font-medium text-emerald-500">{delta}</span>
              <span className="text-muted-foreground">{sub}</span>
            </span>
          </div>
        ))}
      </div>

      <div className="mt-2 shrink-0 sm:mt-3">
        {CITIES.map(({ city, amount }, i) => (
          <div
            key={city}
            className={cn(
              "border-border flex items-center justify-between py-1 text-xs sm:py-1.5 sm:text-sm",
              i > 0 && "border-t",
            )}
          >
            <span className="text-muted-foreground">{city}</span>
            <span className="text-primary font-medium">{amount}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

```
### npm

```bash
npx shadcn@latest add @evilcharts/payouts-echarts-line-chart
```

### yarn

```bash
yarn shadcn@latest add @evilcharts/payouts-echarts-line-chart
```

### bun

```bash
bunx --bun shadcn@latest add @evilcharts/payouts-echarts-line-chart
```

### pnpm

```bash
pnpm dlx shadcn@latest add @evilcharts/payouts-echarts-line-chart
```

## Shipments

### Shipments

```tsx
"use client";

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

const chartData = [
  { slot: "Mon 1", current: 14, previous: 34 },
  { slot: "Mon 2", current: 9, previous: 41 },
  { slot: "Mon 3", current: 18, previous: 37 },
  { slot: "Mon 4", current: 26, previous: 29 },
  { slot: "Tue 1", current: 31, previous: 24 },
  { slot: "Tue 2", current: 27, previous: 33 },
  { slot: "Tue 3", current: 19, previous: 45 },
  { slot: "Tue 4", current: 12, previous: 52 },
  { slot: "Wed 1", current: 16, previous: 47 },
  { slot: "Wed 2", current: 22, previous: 39 },
  { slot: "Wed 3", current: 15, previous: 44 },
  { slot: "Wed 4", current: 11, previous: 50 },
  { slot: "Thu 1", current: 17, previous: 43 },
  { slot: "Thu 2", current: 24, previous: 31 },
  { slot: "Thu 3", current: 20, previous: 26 },
  { slot: "Thu 4", current: 13, previous: 22 },
  { slot: "Fri 1", current: 21, previous: 28 },
  { slot: "Fri 2", current: 29, previous: 36 },
  { slot: "Fri 3", current: 34, previous: 42 },
  { slot: "Fri 4", current: 28, previous: 55 },
  { slot: "Sat 1", current: 23, previous: 49 },
  { slot: "Sat 2", current: 30, previous: 40 },
  { slot: "Sat 3", current: 36, previous: 35 },
  { slot: "Sat 4", current: 32, previous: 44 },
];

const chartConfig = {
  current: { label: "This week", colors: { light: ["#171717"], dark: ["#fafafa"] } },
  previous: { label: "Last week", colors: { light: ["#d4d4d4"], dark: ["#525252"] } },
} satisfies ChartConfig;

const LEGEND = [
  { key: "current", label: "This week", swatch: "border-[#171717] dark:border-[#fafafa]" },
  { key: "previous", label: "Last week", swatch: "border-[#d4d4d4] dark:border-[#525252]" },
];

const TOTAL = chartData.reduce((sum, { current }) => sum + current, 0);

export function EChartsShipmentsLineChart() {
  return (
    <div className="flex h-full w-full flex-col p-4">
      <span className="text-primary text-sm font-medium tracking-tight">Orders shipped</span>

      <div className="mt-1 flex flex-wrap items-center justify-between gap-x-4 gap-y-1">
        <div className="flex items-baseline gap-2">
          <span className="text-primary text-2xl font-semibold tracking-tight sm:text-3xl">
            {TOTAL}
          </span>
          <span className="text-xs font-medium text-emerald-500">+4.2%</span>
          <span className="text-muted-foreground text-xs">vs last week</span>
        </div>
        <div className="flex items-center gap-3">
          {LEGEND.map(({ key, label, swatch }) => (
            <span
              key={key}
              className="text-muted-foreground flex items-center gap-1.5 text-[11px] sm:text-xs"
            >
              <span className={cn("size-2.5 shrink-0 rounded-full border-2", swatch)} />
              {label}
            </span>
          ))}
        </div>
      </div>

      <div className="mt-2 min-h-0 w-full flex-1">
        <EChartsLineChart
          data={chartData}
          config={chartConfig}
          xDataKey="slot"
          className="h-full w-full"
          curveType="linear"
        >
          <EChartsLineChart.Grid />
          <EChartsLineChart.YAxis />
          <EChartsLineChart.XAxis
            dataKey="slot"
            tickFormatter={(value) => (value.endsWith(" 1") ? value.slice(0, 3) : "")}
          />
          <EChartsLineChart.Tooltip />
          <EChartsLineChart.Line dataKey="previous" strokeVariant="dashed" strokeWidth={1.5} />
          <EChartsLineChart.Line dataKey="current" strokeVariant="solid" strokeWidth={1.5}>
            <EChartsLineChart.ActiveDot />
          </EChartsLineChart.Line>
        </EChartsLineChart>
      </div>
    </div>
  );
}

```
### npm

```bash
npx shadcn@latest add @evilcharts/shipments-echarts-line-chart
```

### yarn

```bash
yarn shadcn@latest add @evilcharts/shipments-echarts-line-chart
```

### bun

```bash
bunx --bun shadcn@latest add @evilcharts/shipments-echarts-line-chart
```

### pnpm

```bash
pnpm dlx shadcn@latest add @evilcharts/shipments-echarts-line-chart
```