Photonix UI - React Components, Templates & Figma Design System

LineChartWidget

A specialized widget for displaying Line Charts with integrated header actions and skeleton states.

Preview

Usage

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

const data = [...];

<LineChartWidget 
  title="Visitor Growth" 
  data={data}
  dataKeys="value"
  config={{ value: { label: 'Visitors', color: 'var(--chart-1)' } }}
/>

Component API

LineChartWidget

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 line values. If multiple, multiple lines will be rendered.
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
type	`"step" \| "basis" \| "basisClosed" \| "basisOpen" \| "linear" \| "linearClosed" \| "natural" \| "monotone" \| "stepBefore" \| "stepAfter"`	`'monotone'`	Curve type for the line ('basis' \| 'basisClosed' \| 'basisOpen' \| 'linear' \| 'linearClosed' \| 'natural' \| 'monotone' \| 'step' \| 'stepBefore' \| 'stepAfter')
dot	`boolean`	`true`	Whether to show dots on the line
strokeWidth	`number`	`2`	Stroke width of the line
showLegend	`boolean`	`false`	Whether to show a legend below the chart. Defaults to false.
lineChartProps	`any`	`-`	Any additional props to pass to the Recharts LineChart 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 Line Chart

Standard line chart with a single data series.

Simple Line Chart

<LineChartWidget 
  title="Stock Price" 
  data={LINE_DATA}
  dataKeys="value"
  config={{ value: { label: 'Price', color: 'var(--chart-2)' } }}
  dot={false}
/>

Multi-line Chart

Compare multiple data sets by providing multiple data keys.

Multi-line Chart

<LineChartWidget 
  title="Desktop vs Mobile" 
  data={COMPARE_DATA}
  dataKeys={['desktop', 'mobile']}
  config={{ 
    desktop: { label: 'Desktop', color: 'var(--chart-1)' },
    mobile: { label: 'Mobile', color: 'var(--chart-2)' }
  }}
  showLegend
/>

Step Chart

Using the 'step' curve type for discrete data changes.

Step Chart

<LineChartWidget 
  title="Inventory Status" 
  data={LINE_DATA}
  dataKeys="value"
  config={{ value: { label: 'Stock', color: 'var(--chart-3)' } }}
  type="stepAfter"
/>

Loading State

Displays a skeleton preview while data is being fetched.

Loading State

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

LineChartWidget

Preview

Visitor Growth

Component API

LineChartWidget

Variants

Simple Line Chart

Stock Price

Multi-line Chart

Desktop vs Mobile

Step Chart

Inventory Status

Loading State

On this page