Charts

import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { Bar, BarChart, XAxis, YAxis } from "recharts"

const chartConfig = {
  solar: {
    label: "Solar",
    color: "hsl(142, 76%, 36%)",
  },
}

export function MyChart() {
  return (
    <ChartContainer config={chartConfig} className="min-h-[300px]">
      <BarChart data={data}>
        <XAxis dataKey="month" />
        <YAxis />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="solar" fill="var(--color-solar)" radius={4} />
      </BarChart>
    </ChartContainer>
  )
}

Features

Built with Recharts - composable and flexible
Automatic dark mode support via CSS variables
Accessible with keyboard navigation
Customizable tooltips and legends
Energy-themed color palette included
Responsive by default

Card

Table