Chart Components

Data visualization with area charts in various styles

Simple Area Chart

Basic area chart with a single data series

Stacked Area Chart

Multiple data series stacked on top of each other

Gradient Area Chart

Area chart with gradient fill for visual emphasis

Chart Features

Key features of the chart components

Built with Recharts

Responsive Design

Charts automatically adapt to container width and are fully responsive across all device sizes.

Interactive Tooltips

Hover over data points to see detailed information with styled tooltips matching your theme.

Theme Integration

Colors automatically adapt to your design system using CSS variables from Tailwind config.

Accessible

Built with accessibility in mind, supporting screen readers and keyboard navigation.

Customizable

Control grid visibility, axis display, colors, and gradients through a clean, type-safe API.

Usage Example

How to use the AreaChart component in your code

import { AreaChart } from "@particular/ui/charts";
import type { ChartConfig } from "@particular/ui/charts";

const data = [
  { month: "Jan", value: 186 },
  { month: "Feb", value: 305 },
  { month: "Mar", value: 237 },
];

const config = {
  value: {
    label: "Revenue",
    color: "hsl(var(--primary))",
  },
} satisfies ChartConfig;

<AreaChart
  data={data}
  config={config}
  dataKeys={["value"]}
  xAxisKey="month"
  variant="simple"
  showGrid
  className="h-[300px]"
/>

Chart Variants

Available chart variants and their use cases

Simple Variant

Best for single data series. Shows trends over time with a subtle fill for emphasis. Use when you want to highlight one metric's progression.

Stacked Variant

Ideal for comparing multiple related series that add up to a total. Shows both individual contributions and cumulative values. Great for part-to-whole relationships.

Gradient Variant

Provides maximum visual impact with gradient fills. Use when you want to create emphasis and visual hierarchy. Works well for highlighting important metrics or in dashboards.

import { AreaChart } from "@particular/ui/charts"; import type { ChartConfig } from "@particular/ui/charts"; const data = [ { month: "Jan", value: 186 }, { month: "Feb", value: 305 }, { month: "Mar", value: 237 }, ]; const config = { value: { label: "Revenue", color: "hsl(var(--primary))", }, } satisfies ChartConfig; <AreaChart data={data} config={config} dataKeys={["value"]} xAxisKey="month" variant="simple" showGrid className="h-[300px]" />