Photonix UI - React Components, Templates & Figma Design System

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

import { ChartWidget, ChartContainer, AreaChart, Area } from '@photonix/ultimate';

<ChartWidget title="Traffic Analysis">
  <ChartContainer config={{ value: { label: 'Visitors', color: 'var(--chart-1)' } }}>
    <AreaChart data={data}>
      {/* ... AreaChart components ... */}
    </AreaChart>
  </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.

Area Chart (Custom Content)

<ChartWidget title="Sales Stream">
  <ChartContainer config={{ value: { label: 'Sales', color: 'var(--chart-2)' } }}>
    <AreaChart data={AREA_DATA} margin={{ top: 20, right: 20, left: -20, bottom: 0 }}>
        <CartesianGrid vertical={false} strokeDasharray="3 3" />
        <XAxis dataKey="name" axisLine={false} tickLine={false} />
        <YAxis axisLine={false} tickLine={false} />
        <Area dataKey="value" stroke="var(--color-value)" fill="var(--color-value)" fillOpacity={0.2} />
    </AreaChart>
  </ChartContainer>
</ChartWidget>

With Actions

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

With Actions

<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>
  }
>
  {/* Chart here */}
</ChartWidget>

Loading State

Shows a skeleton state while data is being fetched.

Loading State

<ChartWidget loading title="Revenue" chartHeight={200} footer="Analyzing data..." />

ChartWidget

Preview

Continuous Traffic Analysis

Component API

ChartWidget

Variants

Area Chart (Custom Content)

Sales Stream

With Actions

Financial Data

Loading State

On this page