81 Pro components and page blocks

Get Pro
uibrik

Stock Chart

Pro

Preview

Customize

USD
1D
Candles
Tick interval1000ms
Height260px
Up color
Down color

Installation

Pro

Stock Chart is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/stock-chart

Usage

import { StockChart } from "@/components/uibrik/stock-chart/stock-chart";​<StockChart  symbol="LMNR"  name="Lumen Robotics"  exchange="NASDAQ"  currency="USD"  defaultRange="1D"  defaultType="candles"  live  tickInterval={1000}  height={260}  showStats  upColor=""  downColor=""  defaultIndicators={["ma20", "ma50", "volume", "rsi", "events"]}  onRangeChange={(range) => {}}  onTypeChange={(type) => {}}  onIndicatorsChange={(indicators) => {}}  onActiveChange={(bar) => {}}  // data={…}  // previousClose={0}  // price={0}  // events={[{ t: 0, kind: "earnings", title: "…" }]}  // stats={…}  // range="1D"  // type="line"  // indicators={["ma20"]}/>

Props

StockChart
symbol
Type string
"LMNR"
Ticker in the heading.
name
Type string
"Lumen Robotics"
Company name beside the ticker.
exchange
Type string
"NASDAQ"
Listing exchange.
currency
Type "USD" | "EUR" | "GBP" | "INR" | "JPY"
"USD"
ISO 4217 code for every price.
defaultRange
Type "1D" | "5D" | "1M" | "6M" | "YTD" | "1Y" | "5Y"
"1D"
Range shown first.
defaultType
Type "line" | "candles"
"candles"
Line or candlesticks, shown first.
live
Type boolean
true
Simulated trading while the session is open.
tickInterval
Type number
1000
Time between simulated trades.
height
Type number
260
Price pane height.
showStats
Type boolean
true
Key statistics under the chart.
upColor
Type string
""
Colour for gains. Empty uses green.
downColor
Type string
""
Colour for losses. Empty uses red.
data
Type Partial<Record<Range, Bar[]>>
–
Bars per range, oldest first: { t, o, h, l, c, v } with t in ms. Ranges left out are hidden. Leave out to show a simulated market.
previousClose
Type number
–
Yesterday's close, the baseline for 1D.
price
Type number
–
Latest trade. Written into the last bar of every range as it changes, for a live feed.
events
Type { t: number; kind: "earnings" | "dividend" | "split"; title: string; detail?: string }[]
–
Markers under the line, with a tooltip each.
stats
Type Partial<StockStats>
–
Key statistics: open, high, low, prevClose, volume, avgVolume, marketCap, pe, eps, sharesOutstanding, dividendYield, annualDividend, nextEarnings, high52, low52. Missing ones are worked out from the bars where possible.
range
Type "1D" | "5D" | "1M" | "6M" | "YTD" | "1Y" | "5Y"
–
Controlled range. Pair with onRangeChange.
onRangeChange
Type (range: Range) => void
–
Called when a range is picked.
type
Type "line" | "candles"
–
Controlled chart type. Pair with onTypeChange.
onTypeChange
Type (type: ChartType) => void
–
Called when the chart type is switched.
indicators
Type ("ma20" | "ma50" | "volume" | "rsi" | "events")[]
–
Controlled overlays. Leave out to start from defaultIndicators.
defaultIndicators
Type Indicator[]
["ma20", "ma50", "volume", "rsi", "events"]
Overlays shown first.
onIndicatorsChange
Type (indicators: Indicator[]) => void
–
Called when an overlay is toggled from the legend.
onActiveChange
Type (bar: Bar | null) => void
–
Called with the bar under the cursor.
className
Type string
–
Classes for the outer shell.