Photonix

ChartWidget

A standardized container for charts with header actions, titles, and unified spacing. Use this for custom chart types like Area, Line, or Radar.

Preview

Usage trend

Last four days
Usage
"use client";

import {
    ChartContainer,
    ChartWidget,
    Line,
    LineChart,
    XAxis,
    YAxis,
    type ChartConfig,
} from '@photonix/ultimate';

const data = [
    { label: 'Mon', value: 32 },
    { label: 'Tue', value: 46 },
    { label: 'Wed', value: 41 },
    { label: 'Thu', value: 58 },
];

const config = {
    value: {
        label: 'Usage',
        color: 'var(--chart-1)',
    },
} satisfies ChartConfig;

export default function ChartWidgetBasicExample() {
    return (
        <ChartWidget title="Usage trend" subtitle="Last four days" chartHeight={240}>
            <ChartContainer config={config} minHeight={220}>
                <LineChart accessibilityLayer data={data}>
                    <XAxis dataKey="label" tickLine={false} axisLine={false} />
                    <YAxis tickLine={false} axisLine={false} />
                    <Line dataKey="value" type="monotone" stroke="var(--color-value)" strokeWidth={2} dot={false} />
                </LineChart>
            </ChartContainer>
        </ChartWidget>
    );
}

Component API

ChartWidget

Prop
Type
Default
Description
title
React.ReactNode
-
The title of the widget
subtitle
string
-
Optional subtitle or description
children
React.ReactNode
-
The chart or content to display
actions
React.ReactNode
-
Actions to display in the header (e.g. IconButton)
footer
React.ReactNode
-
Content to display below the chart
loading
boolean
false
Loading state
appearance
WidgetAppearance
'outlined'
Widget appearance
padding
string | number
-
Widget padding (default: 16px)
chartHeight
string | number
300
Height of the chart container
style
React.CSSProperties
-
Custom style
className
string
-
Custom class name

Variants

Area Chart (Custom Content)

Example of using ChartWidget with a custom AreaChart implementation.

Sales Stream

Area Chart (Custom Content)
"use client";

import { Area, AreaChart, Box, CartesianGrid, ChartContainer, ChartWidget, XAxis, YAxis } from '@photonix/ultimate';

const data = [
    { name: 'Jan', value: 400 }, { name: 'Feb', value: 300 }, { name: 'Mar', value: 600 }, { name: 'Apr', value: 200 }, { name: 'May', value: 500 }, { name: 'Jun', value: 350 },
];

export default function ChartWidgetAreaChartExample() {
    return (
        <Box w="100%">
            <ChartWidget title="Sales Stream">
                <ChartContainer config={{ value: { label: 'Sales', color: 'var(--chart-2)' } }}>
                    <AreaChart data={data} margin={{ top: 20, right: 20, left: -20, bottom: 0 }}>
                        <CartesianGrid vertical={false} strokeDasharray="3 3" stroke="var(--border-neutral-tertiary)" />
                        <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} dy={10} />
                        <YAxis axisLine={false} tickLine={false} tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} />
                        <Area dataKey="value" stroke="var(--color-value)" fill="var(--color-value)" fillOpacity={0.2} />
                    </AreaChart>
                </ChartContainer>
            </ChartWidget>
        </Box>
    );
}

With Actions

Widgets often need actions like refresh or export in the header.

Financial Data

Custom Chart Content

With Actions
"use client";

import { ArrowUpOutline, DownloadOutline } from '@photonix/icons';
import { Box, Button, ChartWidget, Flex, IconButton, Text } from '@photonix/ultimate';

export default function ChartWidgetWithActionsExample() {
    return (
        <Box w="100%">
            <ChartWidget
                title="Financial Data"
                actions={(
                    <Flex gap="xs">
                        <Button variant="tertiary" size="small" leadingIcon={<ArrowUpOutline />}>Refresh</Button>
                        <IconButton variant="tertiary" size="small" icon={<DownloadOutline />} aria-label="Download" />
                    </Flex>
                )}
            >
                <Box bg="tertiary" borderRadius="md" h="100%" display="flex" alignItems="center" justifyContent="center">
                    <Text color="secondary">Custom Chart Content</Text>
                </Box>
            </ChartWidget>
        </Box>
    );
}

Loading State

Shows a skeleton state while data is being fetched.

Loading State
"use client";

import { Box, ChartWidget } from '@photonix/ultimate';

export default function ChartWidgetLoadingExample() {
    return (
        <Box w="100%">
            <ChartWidget loading title="Revenue" chartHeight={200} footer="Analyzing data..." />
        </Box>
    );
}

On this page

Preview
Component API
Variants
Area Chart (Custom Content)
With Actions
Loading State
Photonix UI - React Components, Templates & Figma Design System