Line Chart

Track trends and changes over time with connected data points.

Basic Line Chart

Daily Desktop Production

Desktop output throughout the day in watts

Multi-Line Chart

Compare multiple data series on the same chart.

Production vs Consumption

Desktop production compared to household consumption

With Data Points

Show individual data points for precise readings.

Monthly Trend

Desktop vs mobile with data points

Dashed & Reference Lines

Use dashed lines for targets or thresholds.

Production with Target

Actual production vs daily target

Line Interpolation

Choose between smooth curves and straight lines.

Monotone (Smooth)

Linear (Straight)

Usage

import { Line, LineChart, XAxis, YAxis, CartesianGrid, ReferenceLine } from "recharts"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"

<ChartContainer config={chartConfig} className="min-h-[300px]">
  <LineChart data={data}>
    <CartesianGrid strokeDasharray="3 3" vertical={false} />
    <XAxis dataKey="time" />
    <YAxis />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Line
      type="monotone"       {/* or "linear", "step" */}
      dataKey="desktop"
      stroke="var(--color-desktop)"
      strokeWidth={2}
      dot={false}           {/* hide dots, or customize */}
      activeDot={{ r: 6 }}  {/* hover dot size */}
    />
  </LineChart>
</ChartContainer>

{/* Add reference line for targets */}
<ReferenceLine y={100} stroke="yellow" strokeDasharray="5 5" />