Line chart

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

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:

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:

<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:

<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

Mzizi Roots

The registry

Registry architecture

Foundations

Patterns

Blocks

Charts

Content style

Basic line chart

Multi-line chart

Dashed lines

Without dots

Styling guidelines

​Basic line chart

​Multi-line chart

​Dashed lines

​Without dots

​Styling guidelines

Basic line chart

Multi-line chart

Dashed lines

Without dots

Styling guidelines