Price ticker

A live auction's price: the current bid in large, the change since the opening and the number of bids, the bids as steps, the reserve as a line.

Web + MobileBetaCharts

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. Orochia's live auction price (PS-C).

When to use

Orochia's auction room, on the web and in the app: the bids as they arrive.
Any price that moves by discrete steps: a bid, a quote, an offer.

When not to use

A price series over days with open, high, low and close.Use instead: Candlestick
Money per period.Use instead: Earnings chart

Installation

Install

npm install @krizaka/charts

Import

import { PriceTicker } from "@krizaka/charts/ticker";

Examples

Auction room

Eight bids in an Orochia auction, the reserve met.

Signed first take

$72.00current bid+$52.00 (+260%) since the opening · 8 bids

Line chart, 9 (6:00 PM – 6:33 PM). Price: from $20.00 to $72.00, lowest $20.00 (6:00 PM), highest $72.00 (6:33 PM), up 260%.

Signed first take — data
Category	Price
6:00 PM	$20.00
6:02 PM	$25.00
6:05 PM	$30.00
6:11 PM	$35.00
6:12 PM	$42.00
6:20 PM	$50.00
6:26 PM	$55.00
6:31 PM	$65.00
6:33 PM	$72.00

No bid yet

The opening price, the reserve ahead.

Studio session, one hour

$40.00opening price, no bid yet

Line chart, 1. Price: from $40.00 to $40.00. Reserve price at $90.00.

Studio session, one hour — data
Category	Price
6:00 PM	$40.00

Props

A live auction's price: the current bid, the change since the opening, the steps of the bids, the reserve.

Prop	Type	Default	Description
`bids`required	`readonly Bid[]`	—	The bids, in any order: when and how much (minor units).
`currency`required	`string`	—	The ISO 4217 currency.
`opening`required	`number`	—	The opening price, in minor units.
`title`required	`string`	—	What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.
`brand`	`BrandId`	—	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`).
`className`	`string`	—	A class on the figure (layout: margins, grid placement).
`dataTable`	`boolean`	—	The "Show data" button (the table is in the page for screen readers either way). Default true.
`description`	`ReactNode`	—	A sentence under the title: the period, the unit, the source.
`dots`	`boolean`	—	A dot on every point (short series). Default false: the end of each line carries one.
`empty`	`ReactNode`	—	What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of @krizaka /ui fits.
`endLabels`	`boolean`	—	Write the last value at the end of each line (up to three series). Default true.
`error`	`ReactNode`	—	The data could not be loaded: `true` says the default words, a node says yours (a retry button…).
`exportable`	`boolean \| readonly ExportFormat[]`	—	Export buttons: `true` for PNG, SVG and CSV, or the formats you want.
`height`	`number`	—	The height of the plot in pixels. Default 280 (a sparkline: 32).
`hideTitle`	`boolean`	—	Visually hide the title (it stays the chart's accessible name): a card that already has its heading.
`id`	`string`	—	The id of the figure.
`labels`	`Partial<TickerLabels>`	—	The words, passed translated; English by default.
`legend`	`boolean`	—	Show the legend (from two series). Default true.
`live`	`boolean`	`true`	Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.
`loading`	`boolean`	—	The data is on its way: a skeleton of the chart, announced once.
`locale`	`Locale`	—	The locale of every figure and date (`"fr-FR"`). Default `"en-US"`.
`markers`	`readonly Marker[]`	—	Vertical markers at a category: a launch, an incident.
`onSelect`	`((datum: Point, index: number) => void)`	—	Called with the row when a point or a bar is clicked (or Enter is pressed on it).
`openedAt`	`string \| Date`	—	When the auction opened: the first point of the line.
`reserve`	`number`	—	The reserve price, drawn as a line until it is met.
`style`	`CSSProperties`	—	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"`).
`summaryText`	`string`	—	Your own summary instead of the generated one (still read first by screen readers).
`timeFormat`	`CategoryFormat`	`time`	How the times are written. Default `"time"` (`14:30`); `"datetime"` for auctions over several days.
`xLabel`	`string`	—	The header of the categories in the data table (`Month`).
`zero`	`boolean`	—	Start the value axis at zero. Default: true for bars and areas; for lines, unless the values sit far from zero.

Accessibility

The current price and the change are written above the plot; the arrow is decorative.
The reserve is drawn and named until it is met.

Keyboard

Keys	Action
`Tab`	Moves the focus to the plot, then to the data and export buttons.
`Arrow keys`	Walk the bids: each price and time is announced.

Best practices

Pass every bid with its time; the opening price and time give the first step.
Keep live on (the default) while the auction runs: no entrance, no announcement of every bid.
Announce a new bid in the app's own live region (who outbid whom): the chart does not.

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