Prisma /eclipse

Chart

A flexible and composable chart component built on Recharts for visualizing data with various chart types including bar, line, area, pie, and radar charts.

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:

npm install recharts

Usage

Basic Bar Chart

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

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

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

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

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:

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

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

Example Configuration:

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

<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

<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

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

Chart with Custom Styling

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

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

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

Using with Icons

Add icons to your chart configuration for enhanced visual communication:

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:

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>
  );
}

Tooltip Indicators

Three indicator styles are available:

Dot Indicator (Default)

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

Line Indicator

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

Dashed Indicator

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

Live Example:

Dot Indicator

Line Indicator

Dashed Indicator

Advanced Usage

Custom Chart ID

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

Accessing Chart Context

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

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

Card

A versatile container component for grouping related content with optional header, footer, title, description, and content sections.

Checkbox

A checkbox component built on Radix UI with accessible state management and keyboard support.

On this page

OverviewInstallationUsageChartContainer PropsChartConfig TypeChartTooltip PropsChartTooltipContent PropsChartLegend PropsChartLegendContent PropsFeaturesSupported Chart TypesBest PracticesCommon PatternsAccessibilityResponsive BehaviorUsing with IconsIntegration with DataTooltip IndicatorsAdvanced UsageRecharts DocumentationTroubleshooting