Photonix

LineChartWidget

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

Preview

Retention

Weekly cohorts

Active

Retained

Usage
"use client";

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

const data = [
    { name: 'W1', active: 42, retained: 28 },
    { name: 'W2', active: 48, retained: 32 },
    { name: 'W3', active: 55, retained: 39 },
    { name: 'W4', active: 61, retained: 44 },
];

const config: ChartConfig = {
    active: { label: 'Active', color: 'var(--chart-1)' },
    retained: { label: 'Retained', color: 'var(--chart-2)' },
};

export default function LineChartWidgetBasicExample() {
    return <LineChartWidget title="Retention" subtitle="Weekly cohorts" data={data} config={config} dataKeys={['active', 'retained']} showLegend chartHeight={320} />;
}

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.

Stock Price

Simple Line Chart
"use client";

import { LineChartWidget, 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: 'Price', color: 'var(--chart-2)' },
};

export default function LineChartWidgetSimpleExample() {
    return <LineChartWidget title="Stock Price" data={data} dataKeys="value" config={config} dot={false} />;
}

Multi-line Chart

Compare multiple data sets by providing multiple data keys.

Desktop vs Mobile

Desktop

Mobile

Multi-line Chart
"use client";

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

const data = [
    { name: 'Jan', desktop: 400, mobile: 240 },
    { name: 'Feb', desktop: 300, mobile: 139 },
    { name: 'Mar', desktop: 600, mobile: 980 },
    { name: 'Apr', desktop: 200, mobile: 390 },
    { name: 'May', desktop: 500, mobile: 480 },
];

const config: ChartConfig = {
    desktop: { label: 'Desktop', color: 'var(--chart-1)' },
    mobile: { label: 'Mobile', color: 'var(--chart-2)' },
};

export default function LineChartWidgetMultiLineExample() {
    return <LineChartWidget title="Desktop vs Mobile" data={data} dataKeys={['desktop', 'mobile']} config={config} showLegend />;
}

Step Chart

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

Inventory Status

Step Chart
"use client";

import { LineChartWidget, 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: 'Stock', color: 'var(--chart-3)' },
};

export default function LineChartWidgetStepChartExample() {
    return <LineChartWidget title="Inventory Status" data={data} dataKeys="value" config={config} type="stepAfter" />;
}

Loading State

Displays a skeleton preview while data is being fetched.

Loading State
"use client";

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

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

export default function LineChartWidgetLoadingExample() {
    return <LineChartWidget title="Performance Trend" data={[]} dataKeys="value" config={config} loading />;
}

On this page

Preview
Component API
Variants
Simple Line Chart
Multi-line Chart
Step Chart
Loading State
Photonix UI - React Components, Templates & Figma Design System