StockChart

Live preview

Loading example…

Price chart for long daily series: candles, OHLC bars, a line or an area; a range selector and a navigator to zoom; moving averages, Bollinger bands and VWAP over the price; RSI or MACD in a second pane with one crosshair across both; a last-price tag; comparison series in % change; event flags. The indicator math lives in core/indicators.ts.

Import

import { StockChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/stock-chart.

Usage

<StockChart
  title="Precio de la caja de navajas importadas (S/)"
  data={navajas}
  ranges={[...spanishRanges]}
  defaultRange="6m"
  defaultSeriesType="candle"
  overlays={[
      { type: "sma", period: 20 },
      { type: "ema", period: 50 },
    ]}
  oscillator={{ type: "rsi", period: 14 }}
  valueFormat="currency"
  volumeFormat="integer"
  height={440}
  navigator
  lastPrice
  grid
  legend
  tooltip
  toolbar
  loading={false}
  animate
  texts={spanishTexts}
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`data` *	`readonly StockBar[]`		Bars in ascending date order.
`title` *	`string`		Accessible name of the chart.
`description`	`string`
`seriesType`	`"area" \| "line" \| "column" \| "candle" \| "ohlc" \| "heikin-ashi" \| "renko"`		Controlled series type.
`defaultSeriesType`	`"area" \| "line" \| "column" \| "candle" \| "ohlc" \| "heikin-ashi" \| "renko"`	`"candle"`	Initial series type when uncontrolled, “candle” by default.
`onSeriesTypeChange`	`((type: StockSeriesType) => void)`
`seriesTypes`	`readonly StockSeriesType[]`	`SERIES_TYPES`	Types offered in the toolbar; an empty list hides the switch.
`renkoBrickSize`	`number`		Brick size of the Renko type; the ATR(14) of the data by default.
`drawingTools`	`readonly StockTool[]`	`[]`	Tools of the drawing toolbar; none (default) hides it. `DEFAULT_STOCK_TOOLS` has them all.
`drawings`	`readonly StockDrawing[]`		Controlled drawings. Anchors are moments and prices, so they survive zoom and new data.
`defaultDrawings`	`readonly StockDrawing[]`	`[]`
`onDrawingsChange`	`((drawings: StockDrawing[]) => void)`		Called with the full list after a drawing is added or deleted: persist it here.
`pinnable`	`boolean`	`false`	Click (or Enter) on a bar pins its tooltip; pin several to compare days.
`defaultPinned`	`readonly (number \| Date)[]`	`[]`	Times (ms) of the tooltips pinned at first.
`onPinnedChange`	`((times: number[]) => void)`
`onWindowChange`	`((window: StockWindow) => void)`		Reports the visible window whenever it or the data changes.
`ranges`	`readonly TimeRangePreset[]`	`DEFAULT_STOCK_RANGES`	Range selector buttons; an empty list hides them.
`defaultRange`	`string`		Id of the preset applied first; the whole series by default.
`overlays`	`readonly StockOverlay[]`	`[]`	Indicators over the price: SMA, EMA, Bollinger bands, VWAP.
`oscillator`	`StockOscillator`		RSI or MACD in a pane under the price, sharing the crosshair.
`volume`	`boolean`		Volume bars at the bottom of the price pane; shown when the data has volume.
`navigator`	`boolean`	`true`	Mini chart of the whole series with a draggable window (default true).
`lastPrice`	`boolean`	`true`	Dashed line and tag at the last value (default true).
`comparisons`	`readonly StockComparison[]`	`[]`	Other series on the same dates: the chart switches to % change from the first visible bar.
`flags`	`readonly StockFlag[]`	`[]`	Event flags pinned above the bars.
`name`	`string`		Name of the main series in the legend (% mode).
`height`	`number \| "fill"`	`420`	Pixels of the drawing (price, oscillator and navigator), 420 by default, or `"fill"`.
`aspectRatio`	`number`		Width / height ratio; sizes the chart from the container width.
`valueFormat`	`ValueFormat`
`volumeFormat`	`ValueFormat`	`"compact"`
`grid`	`boolean`	`true`
`legend`	`boolean`	`true`
`tooltip`	`boolean`	`true`
`toolbar`	`boolean`	`true`	Toolbar with the range and series-type buttons (default true).
`loading`	`boolean`
`animate`	`boolean`	`true`
`texts`	`StockTextsInput`
`labels`	`Partial<ChartLabels>`
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/stock-chart/stock-chart.tsx