> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mzizi.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Line chart

> Line charts for continuous data — single series, multi-series, dashed projections and dense data sets.

Line charts display data as a series of points connected by line segments. They are best for showing continuous data and comparing multiple trends.

## Basic line chart

```tsx theme={null}

const data = [
  { date: "Mon", temperature: 22 },
  { date: "Tue", temperature: 25 },
  { date: "Wed", temperature: 28 },
  { date: "Thu", temperature: 24 },
  { date: "Fri", temperature: 26 },
  { date: "Sat", temperature: 30 },
  { date: "Sun", temperature: 27 },
]

const chartConfig = {
  temperature: { label: "Temperature", color: "var(--chart-2)" },
}

<ChartContainer config={chartConfig} className="h-[300px]">
  <LineChart data={data}>
    <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
    <XAxis dataKey="date" className="text-xs fill-muted-foreground" />
    <YAxis className="text-xs fill-muted-foreground" />
    <Line
      type="monotone"
      dataKey="temperature"
      stroke="var(--chart-2)"
      strokeWidth={2}
      dot={{ r: 4, fill: "var(--chart-2)" }}
      activeDot={{ r: 6 }}
    />
    <ChartTooltip content={<ChartTooltipContent />} />
  </LineChart>
</ChartContainer>
```

## Multi-line chart

Compare multiple data series:

```tsx theme={null}
const chartConfig = {
  harare: { label: "Harare", color: "var(--chart-1)" },
  bulawayo: { label: "Bulawayo", color: "var(--chart-2)" },
  mutare: { label: "Mutare", color: "var(--chart-3)" },
}

<LineChart data={data}>
  <Line type="monotone" dataKey="harare" stroke="var(--chart-1)" strokeWidth={2} />
  <Line type="monotone" dataKey="bulawayo" stroke="var(--chart-2)" strokeWidth={2} />
  <Line type="monotone" dataKey="mutare" stroke="var(--chart-3)" strokeWidth={2} />
  <ChartLegend content={<ChartLegendContent />} />
  <ChartTooltip content={<ChartTooltipContent />} />
</LineChart>
```

## Dashed lines

Use dashed lines for projected or estimated data:

```tsx theme={null}
<Line
  type="monotone"
  dataKey="projected"
  stroke="var(--chart-4)"
  strokeWidth={2}
  strokeDasharray="5 5"
  dot={false}
/>
```

## Without dots

For dense data sets, hide dots for a cleaner look:

```tsx theme={null}
<Line
  type="monotone"
  dataKey="value"
  stroke="var(--chart-1)"
  strokeWidth={2}
  dot={false}
/>
```

## Styling guidelines

* Use `type="monotone"` for smooth curves (weather data, trends)
* Use `type="linear"` for straight-line connections (discrete measurements)
* Set `strokeWidth={2}` as the default line weight
* Use `dot={{ r: 4 }}` for visible data points (fewer than 20 points)
* Use `dot={false}` for dense data (more than 20 points)
* Set `activeDot={{ r: 6 }}` for the hover state dot
* Use dashed lines for projections or secondary data
* Use `ChartLegend` when displaying more than one line
* Cap at 5 lines per chart — more than that becomes unreadable