NOCTA UI

Line Chart

Track evolving metrics and dynamic changes using clear, continuous line plots.

Install the Line Chart component using the nocta-ui CLI:

npx @nocta-ui/cli add line-chart

Import the component:

import {
  LineChart,
  LineChartHeader,
  LineChartTitle,
  LineChartDescription,
  LineChartActions,
  LineChartGraph,
  LineChartLegend,
  LineChartDataTable,
  LineChartDataTableContent,
} from '@/components/ui/line-chart';

Examples

Default Line Chart

Streaming Revenue by Month

See how launches, campaigns, and seasonality impact your monthly earnings.

JanMayAugDec
Revenue

Header with actions

Session Depth by Day

Hover to compare daily engagement.

MonWedFriSun05101520
Median session duration

Compare multiple series

Signup Mix by Channel

Compare volatile shifts between organic growth and paid acquisition over the year.

JanMayAugDec05001,0001,500
Organic signups
Paid signups

Data table summary

Weekly Support Queue

Track incoming ticket spikes so you can rebalance agents before queues explode.

Week 1Week 3Week 6Week 80100200300
Week 1
48
Week 2
132+175%
Week 3
76−42.4%
Week 4
204+168%
Week 5
97−52.5%
Week 6
261+169%
Week 7
63−75.9%
Week 8
189+200%
Average weekly tickets134+77.4%

API Reference

LineChart

Prop

Type

LineChartGraph

Prop

Type

LineChartHeader

Prop

Type

LineChartTitle

Prop

Type

LineChartDescription

Prop

Type

LineChartActions

Prop

Type

LineChartLegend

Prop

Type

LineChartDataTable

Prop

Type

LineChartDataTableContent

Prop

Type