Krizaka
Documentation

Candlestick

Open, high, low and close per period, rising candles hollow and falling ones filled, the volume in its own panel, zoom and thresholds.

WebBetaCharts

Web only — React, from @krizaka/charts/candlestick. Beta: its API may still change in a minor version.

When to use

  • A price that moves within each period: an auction's bids per hour, a credit's market price per day.

When not to use

Installation

Install

npm install @krizaka/charts

Import

import { Candlestick } from "@krizaka/charts/candlestick";

Examples

Auction bids

An Orochia auction's bids per hour, with the volume and the reserve price.

“Northern lights over Tadoussac” — bids per hour

Candlestick chart, 24 (12:00 AM – 11:00 PM). Opened at CA$120.00, closed at CA$228.60, low CA$111.70, high CA$229.50, up 91%.

“Northern lights over Tadoussac” — bids per hour — data
CategoryOpenHighLowCloseBids
12:00 AMCA$120.00CA$120.00CA$115.20CA$115.204
1:00 AMCA$115.20CA$122.40CA$111.70CA$118.808
2:00 AMCA$118.80CA$119.70CA$114.20CA$117.0012
3:00 AMCA$117.00CA$128.10CA$114.90CA$123.6016
4:00 AMCA$123.60CA$126.60CA$122.20CA$124.807
5:00 AMCA$124.80CA$130.20CA$119.90CA$120.6011
6:00 AMCA$120.60CA$127.50CA$120.60CA$124.8015
7:00 AMCA$124.80CA$124.80CA$120.10CA$123.606
8:00 AMCA$123.60CA$134.40CA$120.80CA$130.8010
9:00 AMCA$130.80CA$133.50CA$128.70CA$132.6014
10:00 AMCA$132.60CA$137.10CA$127.60CA$129.005
11:00 AMCA$129.00CA$135.60CA$128.30CA$133.809
12:00 PMCA$133.80CA$139.20CA$133.20CA$133.2013
1:00 PMCA$133.20CA$143.70CA$129.70CA$141.004
2:00 PMCA$141.00CA$143.40CA$138.20CA$143.408
3:00 PMCA$143.40CA$147.00CA$138.30CA$140.4012
4:00 PMCA$140.40CA$155.70CA$139.00CA$154.8016
5:00 PMCA$154.80CA$168.30CA$154.10CA$163.807
6:00 PMCA$163.80CA$183.00CA$163.80CA$181.2011
7:00 PMCA$181.20CA$198.60CA$177.70CA$193.2015
8:00 PMCA$193.20CA$202.50CA$190.40CA$199.806
9:00 PMCA$199.80CA$214.80CA$197.70CA$214.8010
10:00 PMCA$214.80CA$228.00CA$213.40CA$224.4014
11:00 PMCA$224.40CA$229.50CA$223.70CA$228.605

Props

PropTypeDefaultDescription
closerequiredstring | ((datum: T, index: number) => number)—The field of the price at the end of the period.
datarequiredreadonly T[]—One row per period, oldest first.
highrequiredstring | ((datum: T, index: number) => number)—The field of the highest price of the period.
lowrequiredstring | ((datum: T, index: number) => number)—The field of the lowest price of the period.
openrequiredstring | ((datum: T, index: number) => number)—The field of the price at the start of the period.
titlerequiredstring—What the chart shows, in a few words: its accessible name, and its heading unless hideTitle.
xrequiredstring | ((datum: T, index: number) => unknown)—The field of the period (a date, an hour).
brandBrandId—The brand whose palette the charts use. Without it, a chart follows a .brand-<id> ancestor, else Krizaka. Set it when the app loads a brand stylesheet on :root (@krizaka/tokens/brands/orazaka.css).
classNamestring—A class on the figure (layout: margins, grid placement).
columnLabels{ readonly open: string; readonly high: string; readonly low: string; readonly close: string; readonly volume: string; }—The words of the table's columns and the tooltip's rows.
dataTableboolean—The "Show data" button (the table is in the page for screen readers either way). Default true.
descriptionReactNode—A sentence under the title: the period, the unit, the source.
emptyReactNode—What to show when there is nothing to draw (default: the empty label). An EmptyState of @krizaka /ui fits.
errorReactNode—The data could not be loaded: true says the default words, a node says yours (a retry button…).
exportableboolean | readonly ExportFormat[]—Export buttons: true for PNG, SVG and CSV, or the formats you want.
formatValueFormat—How the prices and the volume are written.
heightnumber—The height of the plot in pixels. Default 280 (a sparkline: 32).
hideTitleboolean—Visually hide the title (it stays the chart's accessible name): a card that already has its heading.
idstring—The id of the figure.
labelsChartLabelsInput—The words, translated: the buttons, the states, the written summary.
liveboolean—Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.
loadingboolean—The data is on its way: a skeleton of the chart, announced once.
localeLocale—The locale of every figure and date ("fr-FR"). Default "en-US".
rendererRenderer—svg (default): sharp, exportable as SVG. canvas: for tens of thousands of marks.
styleCSSProperties—Inline style on the figure (layout only: colours come from the tokens).
summary"hidden" | "visible"—The written summary: read by screen readers only ("hidden", default), or shown under the chart ("visible").
summaryTextstring—Your own summary instead of the generated one (still read first by screen readers).
thresholdsreadonly Threshold[]—Horizontal lines: a reserve price, a target.
volumestring | ((datum: T, index: number) => number)—The field of the volume: drawn in its own panel under the candles.
volumeFormatValueFormat—How the volume is written. Default "compact".
xFormatCategoryFormat—How the periods are written.
zoomboolean—Zoom with the wheel and drag to pan. Default true from 40 periods.

Accessibility

  • The plot is a group named by the title and described by a summary written from the data, read before anything else.
  • The data table is always in the page for assistive technology; “Show data” reveals it for everyone.
  • The engine (ECharts core and this one chart type) loads when the chart nears the screen; a skeleton of the same height holds its place, so nothing shifts.
  • Under reduced motion the chart is drawn without animation.
  • Rising candles are hollow and falling ones filled: the shape says the direction, not only green and red.

Keyboard

KeysAction
TabMoves the focus to the plot (one tab stop), then to the data and export buttons.
Arrow keysWalk the items one by one: each is announced and highlighted, its tooltip shown.
Home / EndJump to the first or the last item.
EscHides the tooltip and clears the highlight.

Best practices

  • Give the reserve or the target as a threshold.
  • Past forty periods the chart zooms on the last forty; the wheel and a drag move through the rest.

Generated from the code of @krizaka/ui 2.4.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Calendar heatmap

One cell a day over a year, weeks in columns, in one sequential hue: streaks, rhythms and gaps at a glance.

Chart (ECharts option)

Any ECharts option on the Krizaka frame: the theme resolved from the tokens, the lazy engine, the states, the table, the keyboard, the export.

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components