Photonix

BarChartWidget

A dedicated widget for displaying Bar Charts with standardized header and spacing.

Preview

Tickets

This week

Completed

Opened

Usage
"use client";

import { BarChartWidget, type ChartConfig } from '@photonix/ultimate';

const data = [
    { name: 'Mon', completed: 18, opened: 24 },
    { name: 'Tue', completed: 22, opened: 28 },
    { name: 'Wed', completed: 16, opened: 21 },
    { name: 'Thu', completed: 30, opened: 35 },
];

const config: ChartConfig = {
    completed: { label: 'Completed', color: 'var(--chart-2)' },
    opened: { label: 'Opened', color: 'var(--chart-1)' },
};

export default function BarChartWidgetBasicExample() {
    return <BarChartWidget title="Tickets" subtitle="This week" data={data} config={config} dataKeys={['completed', 'opened']} showLegend chartHeight={320} />;
}

Component API

BarChartWidget

Prop
Type
Default
Description
data
any[]
-
Data for the chart
config
ChartConfig
-
Chart configuration for colors and labels
dataKeys
string | string[]
-
The key(s) to use for the bar values. If multiple, multiple bars will be rendered per category.
xAxisKey
string
'name'
The key to use for the X axis categories
showGrid
boolean
true
Whether to show the background grid
showXAxis
boolean
true
Whether to show the X axis
showYAxis
boolean
true
Whether to show the Y axis
barSize
number
32
Custom bar size
radius
[number, number, number, number]
[4, 4, 0, 0]
Custom radius for the bars [top-left, top-right, bottom-right, bottom-left]
showLegend
boolean
false
Whether to show a legend below the chart. Defaults to false.
barChartProps
any
-
Any additional props to pass to the Recharts BarChart component
className
string
-
Custom class name
style
React.CSSProperties
-
Custom style
title
React.ReactNode
-
The title of the widget
actions
React.ReactNode
-
Actions to display in the header (e.g. IconButton)
footer
React.ReactNode
-
Content to display below the chart
subtitle
string
-
Optional subtitle or description
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

Variants

Simple Bar Chart

Standard bar chart with a single data key.

Simple Performance

Simple Bar Chart
"use client";

import { BarChartWidget, type ChartConfig } 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 },
];

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

export default function BarChartWidgetSimpleExample() {
    return <BarChartWidget title="Simple Performance" data={data} dataKeys="value" config={config} />;
}

Loading State

Displays a skeleton preview while data is being fetched.

Loading State
"use client";

import { BarChartWidget, type ChartConfig } from '@photonix/ultimate';

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

export default function BarChartWidgetLoadingExample() {
    return <BarChartWidget title="Monthly Performance" data={[]} dataKeys="value" config={config} loading />;
}

Multi-bar Chart

Render multiple bars per category by passing an array of dataKeys.

Revenue vs Cost

Revenue

Cost

Multi-bar Chart
"use client";

import { BarChartWidget, type ChartConfig } from '@photonix/ultimate';

const data = [
    { name: 'Mon', revenue: 400, cost: 240 },
    { name: 'Tue', revenue: 300, cost: 139 },
    { name: 'Wed', revenue: 200, cost: 980 },
    { name: 'Thu', revenue: 278, cost: 390 },
    { name: 'Fri', revenue: 189, cost: 480 },
];

const config: ChartConfig = {
    revenue: { label: 'Revenue', color: 'var(--chart-1)' },
    cost: { label: 'Cost', color: 'var(--chart-2)' },
};

export default function BarChartWidgetMultiBarExample() {
    return <BarChartWidget title="Revenue vs Cost" data={data} dataKeys={['revenue', 'cost']} config={config} showLegend />;
}

Custom Bar Size

Adjust the width and radius of the bars.

Slim Bars

Custom Bar Size
"use client";

import { BarChartWidget, type ChartConfig } 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 },
];

const config: ChartConfig = {
    value: { label: 'Revenue', color: 'var(--chart-3)' },
};

export default function BarChartWidgetCustomSizeExample() {
    return <BarChartWidget title="Slim Bars" data={data} dataKeys="value" config={config} barSize={16} radius={[8, 8, 8, 8]} />;
}

On this page

Preview
Component API
Variants
Simple Bar Chart
Loading State
Multi-bar Chart
Custom Bar Size
Photonix UI - React Components, Templates & Figma Design System