Charts - Dreamy UI

#

Charts

Dreamy UI does not include built-in chart components, but you can easily create beautiful charts using recharts and integrate them seamlessly with Dreamy UI's theming system using the token() utility from Panda CSS.

#

Installation

Install recharts in your project:

npm add recharts

pnpm add recharts

yarn add recharts

bun add recharts

#

Using Tokens for Styling

Panda CSS generates a styled-system folder in your project that includes a token() utility function. This function allows you to access design tokens like colors, spacing, and other theme values that match your Dreamy UI configuration.

Import the token function from your generated styled-system:

import { token } from "styled-system/tokens";

You can then use token() to get theme values for styling your charts:

// Get color tokens
const primaryColor = token("colors.primary");
const borderColor = token("colors.border.muted");
const textColor = token("colors.fg");
 
// Get spacing tokens
const spacing = token("spacing.4"); // Returns the spacing value for 4

#

Examples

#

Bar Chart

A simple bar chart with theme-aware colors:

import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
import { token } from "styled-system/tokens";
 
const data = [
  { name: "Jan", value: 400 },
  { name: "Feb", value: 300 },
  { name: "Mar", value: 500 },
  { name: "Apr", value: 280 },
  { name: "May", value: 390 },
];
 
function BarChartExample() {
  return (
    <BarChart width={500} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" stroke={token("colors.border.muted")} />
      <XAxis 
        dataKey="name" 
        tick={{ fill: token("colors.fg.medium") }}
        axisLine={{ stroke: token("colors.border") }}
      />
      <YAxis 
        tick={{ fill: token("colors.fg.medium") }}
        axisLine={{ stroke: token("colors.border") }}
      />
      <Bar dataKey="value" fill={token("colors.primary")} />
    </BarChart>
  );
}

#

Line Chart with Multiple Series

A line chart with multiple data series using different theme colors:

import { 
  Line, 
  LineChart, 
  CartesianGrid, 
  XAxis, 
  YAxis, 
  Legend, 
  ResponsiveContainer 
} from "recharts";
import { token } from "styled-system/tokens";
 
const data = [
  { month: "Jan", sales: 4000, revenue: 2400 },
  { month: "Feb", sales: 3000, revenue: 1398 },
  { month: "Mar", sales: 2000, revenue: 9800 },
  { month: "Apr", sales: 2780, revenue: 3908 },
  { month: "May", sales: 1890, revenue: 4800 },
  { month: "Jun", sales: 2390, revenue: 3800 },
];
 
function LineChartExample() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" stroke={token("colors.border.muted")} />
        <XAxis 
          dataKey="month" 
          tick={{ fill: token("colors.fg.medium") }}
          axisLine={{ stroke: token("colors.border") }}
        />
        <YAxis 
          tick={{ fill: token("colors.fg.medium") }}
          axisLine={{ stroke: token("colors.border") }}
        />
        <Legend 
          wrapperStyle={{ color: token("colors.fg") }}
        />
        <Line 
          type="monotone" 
          dataKey="sales" 
          stroke={token("colors.primary")} 
          strokeWidth={2}
        />
        <Line 
          type="monotone" 
          dataKey="revenue" 
          stroke={token("colors.secondary")} 
          strokeWidth={2}
        />
      </LineChart>
    </ResponsiveContainer>
  );
}

#

Pie Chart

A pie chart with custom colors from your theme:

import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
import { token } from "styled-system/tokens";
 
const data = [
  { name: "Desktop", value: 400 },
  { name: "Mobile", value: 300 },
  { name: "Tablet", value: 200 },
  { name: "Other", value: 100 },
];
 
const COLORS = [
  token("colors.primary"),
  token("colors.secondary"),
  token("colors.success"),
  token("colors.info"),
];
 
function PieChartExample() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <PieChart>
        <Pie
          data={data}
          cx="50%"
          cy="50%"
          labelLine={false}
          label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
          outerRadius={120}
          fill={token("colors.primary")}
          dataKey="value"
        >
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
          ))}
        </Pie>
        <Tooltip 
          contentStyle={{
            backgroundColor: token("colors.bg"),
            border: `1px solid ${token("colors.border")}`,
            borderRadius: token("radii.md"),
            color: token("colors.fg"),
          }}
        />
      </PieChart>
    </ResponsiveContainer>
  );
}

#

Customization

Since recharts is built on top of SVG, you have full control over styling. Use the token() function to access any design token from your Dreamy UI theme:

Colors: token("colors.primary"), token("colors.border.muted"), token("colors.fg")
Spacing: token("spacing.4"), token("spacing.8")
Border Radius: token("radii.md"), token("radii.lg")
Shadows: token("shadows.lg")
And more: Any token defined in your Panda CSS configuration

This ensures your charts automatically match your application's theme and color mode (light/dark), providing a consistent visual experience throughout your application.

Cli

Llms