# StockChart

> 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 o…

Source: https://ui.jcsoftdev.com/docs/components/stock-chart

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

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

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

## Usage

```tsx
<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

- [Default](/storybook/?path=/story/charts-stockchart--default)
- [Ohlc Bollinger](/storybook/?path=/story/charts-stockchart--ohlc-bollinger)
- [Line Macd](/storybook/?path=/story/charts-stockchart--line-macd)
- [Area Vwap](/storybook/?path=/story/charts-stockchart--area-vwap)
- [Comparison](/storybook/?path=/story/charts-stockchart--comparison)
- [Flags](/storybook/?path=/story/charts-stockchart--flags)
- [Loading](/storybook/?path=/story/charts-stockchart--loading)
- [Empty](/storybook/?path=/story/charts-stockchart--empty)
- [Narrow](/storybook/?path=/story/charts-stockchart--narrow)
- [Fill Parent](/storybook/?path=/story/charts-stockchart--fill-parent)
- [Heikin Ashi](/storybook/?path=/story/charts-stockchart--heikin-ashi)
- [Renko](/storybook/?path=/story/charts-stockchart--renko)
- [Columns](/storybook/?path=/story/charts-stockchart--columns)
- [Streaming](/storybook/?path=/story/charts-stockchart--streaming)
- [Drawing Tools](/storybook/?path=/story/charts-stockchart--drawing-tools)
- [Range Measure](/storybook/?path=/story/charts-stockchart--range-measure)
- [Pinned Tooltips](/storybook/?path=/story/charts-stockchart--pinned-tooltips)
- [Stats](/storybook/?path=/story/charts-stockchart--stats)

## Source

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