Chart

import { BasicBarChartExample, LineChartExample, AreaChartExample, ChartWithLegendExample, PieChartExample, TooltipIndicatorDotExample, TooltipIndicatorLineExample, TooltipIndicatorDashedExample, MultipleDataSeriesExample, StackedAreaChartExample, CustomStyledChartExample, } from "@/components/chart-examples/interactive-examples";

Overview

The Chart component provides a powerful way to visualize data using Recharts. It includes a configuration system for theming, tooltips, legends, and various chart types with built-in responsive behavior.

Installation

If you followed the manual installation process, ensure you have the following dependencies:

bash

npm install recharts

Usage

Basic Bar Chart

tsx

import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@prisma/eclipse";
import { Bar, BarChart, XAxis, YAxis } from "recharts";

const chartData = [
  { month: "January", queries: 186 },
  { month: "February", queries: 305 },
  { month: "March", queries: 237 },
  { month: "April", queries: 73 },
  { month: "May", queries: 209 },
  { month: "June", queries: 214 },
];

const chartConfig = {
  queries: {
    label: "Queries",
    color: "#2563eb",
  },
};

export function MyChart() {
  return (
    <ChartContainer config={chartConfig}>
      <BarChart data={chartData}>
        <XAxis dataKey="month" />
        <YAxis />
        <Bar dataKey="queries" fill="var(--color-queries)" />
        <ChartTooltip content={<ChartTooltipContent />} />
      </BarChart>
    </ChartContainer>
  );
}

Live Example:

Line Chart

tsx

import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@prisma/eclipse";
import { Line, LineChart, XAxis, YAxis, CartesianGrid } from "recharts";

const chartData = [
  { date: "Jan", connections: 186 },
  { date: "Feb", connections: 305 },
  { date: "Mar", connections: 237 },
  { date: "Apr", connections: 273 },
  { date: "May", connections: 209 },
];

const chartConfig = {
  connections: {
    label: "Connections",
    color: "#8b5cf6",
  },
};

export function LineChartExample() {
  return (
    <ChartContainer config={chartConfig}>
      <LineChart data={chartData}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="date" />
        <YAxis />
        <Line 
          type="monotone" 
          dataKey="connections" 
          stroke="var(--color-connections)" 
          strokeWidth={2} 
        />
        <ChartTooltip content={<ChartTooltipContent />} />
      </LineChart>
    </ChartContainer>
  );
}

Live Example:

Area Chart

tsx

import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@prisma/eclipse";
import { Area, AreaChart, XAxis, YAxis, CartesianGrid } from "recharts";

const chartData = [
  { month: "Jan", requests: 4000, cached: 2400 },
  { month: "Feb", requests: 3000, cached: 1398 },
  { month: "Mar", requests: 2000, cached: 9800 },
  { month: "Apr", requests: 2780, cached: 3908 },
  { month: "May", requests: 1890, cached: 4800 },
];

const chartConfig = {
  requests: {
    label: "Requests",
    color: "#3b82f6",
  },
  cached: {
    label: "Cached",
    color: "#10b981",
  },
};

export function AreaChartExample() {
  return (
    <ChartContainer config={chartConfig}>
      <AreaChart data={chartData}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Area 
          type="monotone" 
          dataKey="requests" 
          stackId="1"
          stroke="var(--color-requests)" 
          fill="var(--color-requests)" 
        />
        <Area 
          type="monotone" 
          dataKey="cached" 
          stackId="1"
          stroke="var(--color-cached)" 
          fill="var(--color-cached)" 
        />
        <ChartTooltip content={<ChartTooltipContent />} />
      </AreaChart>
    </ChartContainer>
  );
}

Live Example:

Chart with Legend

tsx

import { 
  ChartContainer, 
  ChartTooltip, 
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent 
} from "@prisma/eclipse";
import { Bar, BarChart, XAxis, YAxis } from "recharts";

const chartData = [
  { month: "Jan", orm: 186, accelerate: 80 },
  { month: "Feb", orm: 305, accelerate: 200 },
  { month: "Mar", orm: 237, accelerate: 120 },
];

const chartConfig = {
  orm: {
    label: "Prisma ORM",
    color: "#2563eb",
  },
  accelerate: {
    label: "Accelerate",
    color: "#8b5cf6",
  },
};

export function ChartWithLegend() {
  return (
    <ChartContainer config={chartConfig}>
      <BarChart data={chartData}>
        <XAxis dataKey="month" />
        <YAxis />
        <Bar dataKey="orm" fill="var(--color-orm)" />
        <Bar dataKey="accelerate" fill="var(--color-accelerate)" />
        <ChartTooltip content={<ChartTooltipContent />} />
        <ChartLegend content={<ChartLegendContent />} />
      </BarChart>
    </ChartContainer>
  );
}

Live Example:

Pie Chart

tsx

import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@prisma/eclipse";
import { Pie, PieChart } from "recharts";

const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
  { browser: "other", visitors: 90, fill: "var(--color-other)" },
];

const chartConfig = {
  chrome: {
    label: "Chrome",
    color: "#2563eb",
  },
  safari: {
    label: "Safari",
    color: "#60a5fa",
  },
  firefox: {
    label: "Firefox",
    color: "#f97316",
  },
  edge: {
    label: "Edge",
    color: "#10b981",
  },
  other: {
    label: "Other",
    color: "#6b7280",
  },
};

export function PieChartExample() {
  return (
    <ChartContainer config={chartConfig}>
      <PieChart>
        <Pie data={chartData} dataKey="visitors" />
        <ChartTooltip content={<ChartTooltipContent />} />
      </PieChart>
    </ChartContainer>
  );
}

Live Example:

Theme Support

The Chart component supports light and dark themes:

tsx

const chartConfig = {
  queries: {
    label: "Queries",
    theme: {
      light: "#2563eb",
      dark: "#60a5fa",
    },
  },
};

ChartContainer Props

config - Chart configuration object defining colors, labels, and icons (required)
id - Optional custom ID for the chart (optional)
className - Additional CSS classes (optional)
children - Recharts components (required)
All standard HTML div attributes are supported

ChartConfig Type

tsx

type ChartConfig = {
  [key: string]: {
    label?: React.ReactNode;
    icon?: React.ComponentType;
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: { light: string; dark: string } }
  );
};

Example Configuration:

tsx

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "#2563eb",
    icon: MonitorIcon,
  },
  mobile: {
    label: "Mobile",
    theme: {
      light: "#10b981",
      dark: "#34d399",
    },
  },
};

ChartTooltip Props

The ChartTooltip component wraps Recharts' Tooltip component. Use it with ChartTooltipContent for styled tooltips.

ChartTooltipContent Props

active - Whether tooltip is active (from Recharts)
payload - Data payload (from Recharts)
label - Label for the tooltip (from Recharts)
className - Additional CSS classes (optional)
indicator - Indicator style: "dot" | "line" | "dashed" (default: "dot")
hideLabel - Hide the label (boolean, default: false)
hideIndicator - Hide the indicator (boolean, default: false)
labelFormatter - Custom label formatter function (optional)
formatter - Custom value formatter function (optional)
color - Override indicator color (optional)
nameKey - Key for the name field (optional)
labelKey - Key for the label field (optional)

ChartLegend Props

The ChartLegend component wraps Recharts' Legend component. Use it with ChartLegendContent for styled legends.

ChartLegendContent Props

payload - Legend data (from Recharts)
className - Additional CSS classes (optional)
hideIcon - Hide the icon/indicator (boolean, default: false)
verticalAlign - Vertical alignment: "top" | "bottom" (default: "bottom")
nameKey - Key for the name field (optional)

Features

✅ Built on Recharts for comprehensive chart types
✅ Responsive container with aspect ratio support
✅ Theme support (light/dark mode)
✅ Customizable tooltips with multiple indicator styles
✅ Flexible legend component
✅ Type-safe configuration
✅ CSS variable-based theming
✅ Eclipse design system integration
✅ Support for icons in config
✅ Custom formatters for tooltips and labels

Supported Chart Types

The Chart component works with all Recharts chart types:

BarChart - Vertical or horizontal bar charts
LineChart - Line charts with various interpolations
AreaChart - Area charts with stacking support
PieChart - Pie and donut charts
RadarChart - Radar/spider charts
RadialBarChart - Radial bar charts
ScatterChart - Scatter plots
ComposedChart - Combined chart types

Best Practices

Always provide meaningful labels in your chartConfig
Use consistent color schemes across related charts
Provide tooltips for better data exploration
Use appropriate chart types for your data (bars for comparisons, lines for trends, etc.)
Keep the number of data series manageable (typically 3-5 max)
Use legends when showing multiple data series
Ensure sufficient color contrast for accessibility
Consider mobile viewports when designing charts
Use theme-aware colors for dark mode support
Format large numbers appropriately (use abbreviations like "1.2k" instead of "1200")

Common Patterns

Multiple Data Series

tsx

<ChartContainer config={chartConfig}>
  <BarChart data={chartData}>
    <XAxis dataKey="month" />
    <YAxis />
    <Bar dataKey="series1" fill="var(--color-series1)" />
    <Bar dataKey="series2" fill="var(--color-series2)" />
    <Bar dataKey="series3" fill="var(--color-series3)" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
  </BarChart>
</ChartContainer>

Live Example:

Stacked Area Chart

tsx

<ChartContainer config={chartConfig}>
  <AreaChart data={chartData}>
    <XAxis dataKey="date" />
    <YAxis />
    <Area 
      type="monotone" 
      dataKey="cached" 
      stackId="1" 
      fill="var(--color-cached)" 
    />
    <Area 
      type="monotone" 
      dataKey="uncached" 
      stackId="1" 
      fill="var(--color-uncached)" 
    />
    <ChartTooltip content={<ChartTooltipContent />} />
  </AreaChart>
</ChartContainer>

Live Example:

Custom Tooltip Formatting

tsx

<ChartTooltip 
  content={
    <ChartTooltipContent 
      labelFormatter={(value) => `Date: ${value}`}
      formatter={(value) => [`${value}ms`, "Response Time"]}
    />
  } 
/>

Chart with Custom Styling

tsx

<ChartContainer 
  config={chartConfig}
  className="h-[400px] w-full"
>
  <LineChart data={chartData}>
    <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
    <XAxis dataKey="month" />
    <YAxis />
    <Line 
      type="monotone" 
      dataKey="value" 
      stroke="var(--color-value)"
      strokeWidth={3}
      dot={{ r: 6 }}
    />
    <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
  </LineChart>
</ChartContainer>

Live Example:

Accessibility

Charts use semantic structure with proper containers
Tooltip content is keyboard accessible
Color coding is supplemented with labels
Ensure sufficient color contrast between data series
Consider providing data tables as alternatives for screen readers
Use descriptive labels in your chart configuration
Test charts with keyboard navigation

Responsive Behavior

Charts automatically resize based on their container:

tsx

// Full width with custom height
<div className="w-full h-[300px]">
  <ChartContainer config={chartConfig}>
  </ChartContainer>
</div>

// Default aspect-video ratio (16:9)
<ChartContainer config={chartConfig}>
</ChartContainer>

Using with Icons

Add icons to your chart configuration for enhanced visual communication:

tsx

import { Database, Zap } from "lucide-react";

const chartConfig = {
  database: {
    label: "Database",
    color: "#2563eb",
    icon: Database,
  },
  cache: {
    label: "Cache",
    color: "#10b981",
    icon: Zap,
  },
};

Integration with Data

The Chart component works seamlessly with your data fetching:

tsx

async function DataChart() {
  const data = await fetchChartData();
  
  return (
    <ChartContainer config={chartConfig}>
      <BarChart data={data}>
        <XAxis dataKey="date" />
        <YAxis />
        <Bar dataKey="count" fill="var(--color-count)" />
        <ChartTooltip content={<ChartTooltipContent />} />
      </BarChart>
    </ChartContainer>
  );
}

Three indicator styles are available:

Dot Indicator (Default)

tsx

<ChartTooltip content={<ChartTooltipContent indicator="dot" />} />

Line Indicator

tsx

<ChartTooltip content={<ChartTooltipContent indicator="line" />} />

Dashed Indicator

tsx

<ChartTooltip content={<ChartTooltipContent indicator="dashed" />} />

Live Example:

<div className="grid grid-cols-1 md:grid-cols-3 gap-4 my-4"> <div> <p className="text-sm font-medium mb-2">Dot Indicator</p> <TooltipIndicatorDotExample /> </div> <div> <p className="text-sm font-medium mb-2">Line Indicator</p> <TooltipIndicatorLineExample /> </div> <div> <p className="text-sm font-medium mb-2">Dashed Indicator</p> <TooltipIndicatorDashedExample /> </div> </div>

Advanced Usage

Custom Chart ID

tsx

<ChartContainer id="my-custom-chart" config={chartConfig}>
</ChartContainer>

Accessing Chart Context

The useChart hook is available for custom components within the chart:

tsx

import { useChart } from "@prisma/eclipse";

function CustomComponent() {
  const { config } = useChart();
  // Use config in your custom component
}

Recharts Documentation

For more advanced chart configurations, refer to the Recharts documentation. All Recharts components and props are supported within ChartContainer.

Troubleshooting

Chart not displaying:

Ensure data is in the correct format
Check that dataKey values match your data properties
Verify ChartContainer has a defined height or aspect ratio

Colors not applying:

Use var(--color-keyname) format for fill and stroke
Ensure keys in chartConfig match dataKey values
Check theme configuration for dark mode

Tooltip not showing:

Verify ChartTooltip and ChartTooltipContent are included
Check that data values are not null/undefined
Ensure proper z-index stacking

Overview

Installation

Usage

ChartContainer Props

ChartConfig Type

ChartTooltip Props

ChartTooltipContent Props

ChartLegend Props

ChartLegendContent Props

Features

Supported Chart Types

Best Practices

Common Patterns

Accessibility

Responsive Behavior

Using with Icons

Integration with Data

Tooltip Indicators

Advanced Usage

Recharts Documentation

Troubleshooting