# Line Chart Examples

> Complete line chart layouts for trends, forecasts, and comparison.

Source: https://www.honestui.com/docs/charts/line-chart/blocks

These examples show a chart inside a complete reporting surface. The values are sample data. Open the Code tab and update data keys, units, summaries, and nonvisual access together.

## Renewable energy output [#renewable-energy-output]

Use this pattern to distinguish observed and forecast values across time. Replace `month`, `generated`, and `forecast`, then state where the forecast begins. A stroke change or visible label should distinguish forecast data without color alone.

### Renewable energy output

```tsx
"use client";

import { LineChart, type ChartConfig } from "honestui/charts";
import { cn } from "@/lib/utils";

// Scenario: Renewable energy output
const chartData = [
  { month: "Jan", generated: 346, forecast: 608 },
  { month: "Feb", generated: 431, forecast: 557 },
  { month: "Mar", generated: 380, forecast: 623 },
  { month: "Apr", generated: 505, forecast: 522 },
  { month: "May", generated: 578, forecast: 442 },
  { month: "Jun", generated: 539, forecast: 490 },
  { month: "Jul", generated: 636, forecast: 413 },
  { month: "Aug", generated: 710, forecast: 351 },
  { month: "Sep", generated: 664, forecast: 397 },
  { month: "Oct", generated: 735, forecast: 315 },
  { month: "Nov", generated: 685, forecast: 367 },
  { month: "Dec", generated: 766, forecast: 291 },
];

const chartConfig = {
  generated: {
    label: "Generated",
    colors: {
      light: ["#f97316", "#ec4899"],
      dark: ["#fb923c", "#f472b6"],
    },
  },
  forecast: {
    label: "Forecast",
    colors: {
      light: ["#0891b2", "#7c3aed"],
      dark: ["#22d3ee", "#a78bfa"],
    },
  },
} satisfies ChartConfig;

const STATS = [
  {
    key: "month",
    label: "This month",
    value: "12,480 MWh",
    delta: "+8.4%",
    sub: "11,960 last month",
    swatch: "bg-[#f97316] dark:bg-[#fb923c]",
  },
  {
    key: "year",
    label: "This year",
    value: "164,320 MWh",
    delta: "+3.1%",
    sub: "158,740 last year",
    swatch: "bg-[#ec4899] dark:bg-[#f472b6]",
  },
];

const CITIES = [
  { city: "Coastal wind", amount: "84,210" },
  { city: "Desert solar", amount: "61,940" },
];

export function PayoutsLineChart() {
  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">
        <LineChart
          data={chartData}
          config={chartConfig}
          xDataKey="month"
          className="h-full w-full"
          curveType="monotone"
        >
          <LineChart.Grid />
          <LineChart.YAxis />
          <LineChart.Tooltip variant="frosted-glass" />
          <LineChart.Line dataKey="generated" strokeVariant="solid" strokeWidth={2} glowing>
            <LineChart.ActiveDot variant="ping" />
          </LineChart.Line>
          <LineChart.Line dataKey="forecast" strokeVariant="solid" strokeWidth={2} glowing>
            <LineChart.ActiveDot variant="ping" />
          </LineChart.Line>
        </LineChart>
      </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>
  );
}

```

## Bread proofing schedule [#bread-proofing-schedule]

Use this comparison when two runs share the same ordered intervals. Replace `slot`, `previous`, and `current`, then update the unit and written comparison. Provide a table when readers must inspect each interval.

### Bread proofing schedule

```tsx
"use client";

import { LineChart, type ChartConfig } from "honestui/charts";
import { cn } from "@/lib/utils";

// Scenario: Bread proofing schedule
const chartData = [
  { slot: "Mon 1", current: 16, previous: 38 },
  { slot: "Mon 2", current: 10, previous: 46 },
  { slot: "Mon 3", current: 20, previous: 41 },
  { slot: "Mon 4", current: 29, previous: 32 },
  { slot: "Tue 1", current: 34, previous: 27 },
  { slot: "Tue 2", current: 30, previous: 37 },
  { slot: "Tue 3", current: 21, previous: 50 },
  { slot: "Tue 4", current: 13, previous: 58 },
  { slot: "Wed 1", current: 18, previous: 52 },
  { slot: "Wed 2", current: 24, previous: 43 },
  { slot: "Wed 3", current: 17, previous: 49 },
  { slot: "Wed 4", current: 12, previous: 56 },
  { slot: "Thu 1", current: 19, previous: 48 },
  { slot: "Thu 2", current: 27, previous: 34 },
  { slot: "Thu 3", current: 22, previous: 29 },
  { slot: "Thu 4", current: 14, previous: 24 },
  { slot: "Fri 1", current: 23, previous: 31 },
  { slot: "Fri 2", current: 32, previous: 40 },
  { slot: "Fri 3", current: 38, previous: 47 },
  { slot: "Fri 4", current: 31, previous: 61 },
  { slot: "Sat 1", current: 26, previous: 54 },
  { slot: "Sat 2", current: 33, previous: 44 },
  { slot: "Sat 3", current: 40, previous: 39 },
  { slot: "Sat 4", current: 36, previous: 49 },
];

const chartConfig = {
  current: { label: "Baked", colors: { light: ["#171717"], dark: ["#fafafa"] } },
  previous: { label: "Pre-orders", colors: { light: ["#d4d4d4"], dark: ["#525252"] } },
} satisfies ChartConfig;

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

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

export function ShipmentsLineChart() {
  return (
    <div className="flex h-full w-full flex-col p-4">
      <span className="text-primary text-sm font-medium tracking-tight">Loaves prepared</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">+6.1%</span>
          <span className="text-muted-foreground text-xs">versus prior 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">
        <LineChart
          data={chartData}
          config={chartConfig}
          xDataKey="slot"
          className="h-full w-full"
          curveType="linear"
        >
          <LineChart.Grid />
          <LineChart.YAxis />
          <LineChart.XAxis
            dataKey="slot"
            tickFormatter={(value) => (value.endsWith(" 1") ? value.slice(0, 3) : "")}
          />
          <LineChart.Tooltip />
          <LineChart.Line dataKey="previous" strokeVariant="dashed" strokeWidth={1.5} />
          <LineChart.Line dataKey="current" strokeVariant="solid" strokeWidth={1.5}>
            <LineChart.ActiveDot />
          </LineChart.Line>
        </LineChart>
      </div>
    </div>
  );
}

```