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>

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>

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

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