Chart

A robust wrapper around the recharts library. Instead of hardcoding hex colors into your charts, this component automatically injects your Theme Customizer's CSS variables (like --primary) into the charts. This ensures your data visualizations always match your site's exact aesthetic, even when switching to dark mode.

Live Preview

Installation

Architecture

The ChartContainer component provides a React Context that maps a config object containing labels and CSS colors down to the tooltip and the SVG charts.

By defining colors as CSS variables internally, you can effortlessly swap out themes or toggle dark mode, and your recharts will instantly update without requiring a full React re-render.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { Chart } from "@/components/ui/chart";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { Chart } from "@/components/ui/chart";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <Chart
      >
        <div>Content goes here</div>
      </Chart>
    </div>
  );
}