Candlestick
Open, high, low and close per period: rising candles green, falling ones red, or a monochrome tape (hollow bone rising, solid grey falling) where the candle under your pointer heats in the accent.
$149 once · every Pro piece
Point at a candle and it lights up; the readout rolls to its close and lists O, H, L and C with the change. The vertical crosshair and the change take the candle’s direction colour, a dashed line follows your pointer’s height with a rolling value pill on the price axis, and the date pill rolls along the bottom. Scroll to zoom around the pointer, drag to pan with a little momentum, double-click to reset, + and − from the keyboard; the price axis re-fits to what is in view. Options: volume bars on their own axis in the bottom quarter, a moving average, a Bollinger envelope, hatched falling bodies, an OHLC tooltip, and loading and empty states.
Install
npx shadcn@latest add @obsyde/candlestickNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Candlestick } from '@/components/obsyde/ember/candlestick/Candlestick';
export function Example() {
return (
<Candlestick />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/candlestick/Candlestick.tsxcomponentember/candlestick/candlestick.cssstylesember/candlestick/CandlestickDemo.tsxdemoember/viz-kit/viz-kit.csssharedember/viz-kit/Tooltip.tsxsharedember/viz-kit/focus.tssharedember/viz-kit/patterns.tsxsharedember/viz-kit/roll.tssharedember/shared/rolling-number.csssharedember/shared/spring.tssharedember/shared/accent.tssharedember/viz-kit/scale.tssharedember/viz-kit/motion.tssharedember/viz-kit/chart.tsxsharedember/shared/ember.csssharedember/viz-kit/touch.tssharedember/viz-kit/keyboard.tssharedember/viz-kit/size.tssharedember/viz-kit/States.tsxsharedember/viz-kit/shape.tssharedember/viz-kit/series.tsxsharedember/viz-kit/Grid.tsxsharedember/viz-kit/Axis.tsxsharedember/viz-kit/annotations.tsxshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
colorsColours | 'market' | 'mono' | 'market' |
candlesCandles | number | 64 |
zoomZoom (visible) | number | 0 |
volumeVolume | boolean | false |
maMoving average | number | 0 |
bandsEnvelope | boolean | false |
bodiesFalling bodies | 'solid' | 'pattern' | 'solid' |
priceLinePrice line | boolean | true |
tooltipTooltip | 'none' | 'panel' | 'none' |
patternPattern | 'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch' | 'none' |
backgroundBackground | 'grid' | 'dots' | 'none' | 'grid' |
revealReveal | 'sweep' | 'cool' | 'rise' | 'fade' | 'none' | 'sweep' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
heightHeight | number | 260 |
seedSeed | number | 5 |