Photonix UI - React Components, Templates & Figma Design System

BarChartWidget

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

Preview

Usage

import { BarChartWidget } from '@photonix/ultimate';

const data = [
  { name: 'Jan', value: 400 },
  { name: 'Feb', value: 300 },
  // ...
];

<BarChartWidget 
  title="Monthly Performance" 
  data={data}
  dataKeys="value"
  config={{ value: { label: 'Revenue', color: 'var(--chart-1)' } }}
/>

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 Bar Chart

<BarChartWidget 
  title="Simple Performance" 
  data={BAR_DATA}
  dataKeys="value"
  config={{ value: { label: 'Revenue', color: 'var(--chart-1)' } }}
/>

Loading State

Displays a skeleton preview while data is being fetched.

Loading State

<BarChartWidget 
  title="Monthly Performance" 
  data={[]}
  dataKeys="value"
  config={{ value: { label: 'Revenue', color: 'var(--chart-1)' } }}
  loading
/>

Multi-bar Chart

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

Multi-bar Chart

const data = [
  { name: 'Mon', revenue: 400, cost: 240 },
  { name: 'Tue', revenue: 300, cost: 139 },
  // ...
];

<BarChartWidget 
  title="Revenue vs Cost" 
  data={data}
  dataKeys={['revenue', 'cost']}
  config={{ 
    revenue: { label: 'Revenue', color: 'var(--chart-1)' },
    cost: { label: 'Cost', color: 'var(--chart-2)' }
  }}
  showLegend
/>

Custom Bar Size

Adjust the width and radius of the bars.

Custom Bar Size

<BarChartWidget 
  title="Slim Bars" 
  data={BAR_DATA}
  dataKeys="value"
  config={{ value: { label: 'Revenue', color: 'var(--chart-3)' } }}
  barSize={16}
  radius={[8, 8, 8, 8]}
/>

BarChartWidget

Preview

Monthly Performance

Component API

BarChartWidget

Variants

Simple Bar Chart

Simple Performance

Loading State

Multi-bar Chart

Revenue vs Cost

Custom Bar Size

Slim Bars

On this page