Photonix

Line Chart

Visualise data trends over time using LineChart.

Preview

Usage
"use client";

import { CartesianGrid, ChartContainer, ChartTooltip, Line, LineChart, XAxis, YAxis, type ChartConfig } from '@photonix/ultimate';

const data = [
    { week: 'W1', score: 62 },
    { week: 'W2', score: 68 },
    { week: 'W3', score: 73 },
    { week: 'W4', score: 81 },
];

const config: ChartConfig = {
    score: { label: 'Score', color: 'var(--chart-2)' },
};

export default function LineChartBasicExample() {
    return (
        <ChartContainer config={config} minHeight={260}>
            <LineChart data={data} margin={{ top: 20, right: 20, left: -20, bottom: 0 }}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis dataKey="week" tickLine={false} axisLine={false} tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} />
                <YAxis tickLine={false} axisLine={false} tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} />
                <ChartTooltip />
                <Line type="monotone" dataKey="score" stroke="var(--color-score)" strokeWidth={2} dot />
            </LineChart>
        </ChartContainer>
    );
}

Component API

LineChart

Prop
Type
Default
Description
data
any[]
-
The source data array.
children
ReactElement
-
Chart components (Line, XAxis, Tooltip, Legend, etc).

Line

Prop
Type
Default
Description
dataKey
string
-
The key of data to be displayed.
type
string
monotone
The interpolation type of line.
stroke
string
-
The color of the line.

Variants

Multi-line chart

Compare multiple series on the same time axis.

Multi-line chart
"use client";

import { CartesianGrid, ChartContainer, ChartLegend, ChartTooltip, Line, LineChart, XAxis, YAxis, type ChartConfig } from '@photonix/ultimate';

const data = [
    { month: 'Jan', desktop: 42, mobile: 28 },
    { month: 'Feb', desktop: 55, mobile: 35 },
    { month: 'Mar', desktop: 48, mobile: 52 },
    { month: 'Apr', desktop: 66, mobile: 61 },
    { month: 'May', desktop: 72, mobile: 68 },
];

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

export default function LineChartMultiLineExample() {
    return (
        <ChartContainer config={config} minHeight={260}>
            <LineChart data={data} margin={{ top: 20, right: 20, left: -20, bottom: 0 }}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis dataKey="month" tickLine={false} axisLine={false} tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} />
                <YAxis tickLine={false} axisLine={false} tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} />
                <ChartTooltip />
                <ChartLegend />
                <Line type="monotone" dataKey="desktop" stroke="var(--color-desktop)" strokeWidth={2} dot={false} />
                <Line type="monotone" dataKey="mobile" stroke="var(--color-mobile)" strokeWidth={2} dot={false} />
            </LineChart>
        </ChartContainer>
    );
}

Step chart

Use step interpolation for discrete changes over time.

Step chart
"use client";

import { CartesianGrid, ChartContainer, ChartTooltip, Line, LineChart, XAxis, YAxis, type ChartConfig } from '@photonix/ultimate';

const data = [
    { day: 'Mon', tickets: 18 },
    { day: 'Tue', tickets: 24 },
    { day: 'Wed', tickets: 24 },
    { day: 'Thu', tickets: 36 },
    { day: 'Fri', tickets: 29 },
];

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

export default function LineChartStepExample() {
    return (
        <ChartContainer config={config} minHeight={260}>
            <LineChart data={data} margin={{ top: 20, right: 20, left: -20, bottom: 0 }}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis dataKey="day" tickLine={false} axisLine={false} tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} />
                <YAxis tickLine={false} axisLine={false} tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} />
                <ChartTooltip />
                <Line type="stepAfter" dataKey="tickets" stroke="var(--color-tickets)" strokeWidth={2} dot />
            </LineChart>
        </ChartContainer>
    );
}

On this page

Preview
Component API
Variants
Multi-line chart
Step chart
Photonix UI - React Components, Templates & Figma Design System