CandlestickChart

Shows the open, high, low and close of a value for each period.

SourcePackage @kerf-js/veneer

Preview

tsx

import { CandlestickChart } from '@kerf-js/veneer'export function Latency() {  return (  <CandlestickChart    title="Checkout p95 latency"    description="Open, high, low and close for each day"    data={LATENCY_DAYS}    format={ms}  />  )}const wobble = (i: number) =>  (Math.sin(i * 12.9898) * 43758.5453) % 1const LATENCY_DAYS = Array.from(  { length: 30 },  (_, i) => {    const open = 112 + Math.sin(i / 4) * 14 + i * 0.3,      close = open + wobble(i + 40) * 12    return {      label: `Oct ${i + 1}`,      open: Math.round(open),      close: Math.round(close),      high: Math.round(        Math.max(open, close) +          3 +          Math.abs(wobble(i)) * 9,      ),      low: Math.round(        Math.min(open, close) -          3 -          Math.abs(wobble(i + 9)) * 7,      ),    }  },)const ms = (v: number) => `${Math.round(v)} ms`

Installation

npm install @kerf-js/veneer

Usage

tsx

import { CandlestickChart } from '@kerf-js/veneer'<CandlestickChart  title="Checkout p95 latency"  description="Open, high, low and close for each day"  data={LATENCY_DAYS}  format={ms}/>

OHLC bars

variant="ohlc" draws thin bars with ticks.

tsx

import { CandlestickChart } from '@kerf-js/veneer'export function Ohlc() {  return (  <CandlestickChart    title="Checkout p95 latency"    data={LATENCY_DAYS}    format={ms}    variant="ohlc"  />  )}const wobble = (i: number) =>  (Math.sin(i * 12.9898) * 43758.5453) % 1const LATENCY_DAYS = Array.from(  { length: 30 },  (_, i) => {    const open = 112 + Math.sin(i / 4) * 14 + i * 0.3,      close = open + wobble(i + 40) * 12    return {      label: `Oct ${i + 1}`,      open: Math.round(open),      close: Math.round(close),      high: Math.round(        Math.max(open, close) +          3 +          Math.abs(wobble(i)) * 9,      ),      low: Math.round(        Math.min(open, close) -          3 -          Math.abs(wobble(i + 9)) * 7,      ),    }  },)const ms = (v: number) => `${Math.round(v)} ms`

Accessibility

Every chart has a text alternative and a table view of its numbers, so nothing depends on seeing the marks. See Chart for its keyboard support.

API Reference

Prop	Type	Default	Description
`title`	`string`	—	The heading.
`level`	`2 \| 3 \| 4 \| 6 \| 5`	—	The title's heading level: one below the heading the chart sits under. Default 3, a chart in a page section.
`description`	`unknown`	—	One supporting line under the title.
`toolbar`	`unknown`	—	Beside the view toggle: a layout switch, a range picker.
`state`	`"error" \| "loading" \| "empty"`	—	Replaces the plot, in the same frame. With no data the frame shows `empty` on its own.
`loading`	`string`	—	Shows that work is under way.
`empty`	`{ title: string; detail?: unknown; }`	—	The title and detail shown in place of the plot when there is no data.
`error`	`{ title: string; detail?: unknown; }`	—	A message that marks the field invalid and says why.
`action`	`unknown`	—	The next step under an empty or error state: a Retry button.
`data`	`Ohlc[]`	—	The series to draw.
`summary`	`string \| ((c: { data: Ohlc[]; title: string; }) => string)`	—	One sentence for screen readers and the page; generated from the data when absent.
`variant`	`"candle" \| "ohlc"`	—	Which form it takes.
`format`	`Fmt`	—	Turns a value into the text shown.

RelatedLine chart Box plot