#API reference

Everything the tickline package exports, every method and property of Chart and <trade-chart>, every event, and the types they use. For settings, see Configuration.

• Exports
• <trade-chart>
• Chart
  • Data · Settings · Overlays and alerts · Shapes and layers · Indicators · Drawings · View · Images · State · Events · Lifecycle
• Events
• Functions
• Types

#Exports

import {
  Chart, TradeChartElement, defineTradeChart, syncCharts,
  defaultOptions, DEFAULT_LABELS, DARK, LIGHT, CSS_VARS,
  registerIndicator, getIndicator, listIndicators, sma, ema, rsi, stdev,
  parseTimeframe, parseSpan, bucketStart, heikinAshi, FIB_LEVELS, TOOL_NAMES,
} from "tickline";

Importing the package registers <trade-chart> (in the browser; on the server it does nothing). With the script tag, all of these are on the global Tickline.

#<trade-chart>

The element wraps a Chart and adds the built-in buttons, full screen and the text editor. Its methods are the Chart methods below, plus the ones in this section.

#Attributes

Every attribute is listed in Configuration → Attributes. Removing an attribute puts its setting back to the default.

#Properties

#Methods only on the element

#Before it's in the page

setOptions, setData, prependData, tick, update, setDrawings, setDrawingTool, setState, setLoading, setHistoryLoader, reloadHistory, retryHistory, playIntro, zoomTo, setPriceRange, setVisibleRange, scrollToTime, updateOverlay, removeOverlay, clearOverlays, updateIndicator, removeIndicator, clearIndicators, updateDrawing, removeDrawing and clearDrawings can be called before the element is added to the page: they run when it is. Methods that return an id (addMarker, addShape, addIndicator, addDrawing …) and addLayer need it in the page, and throw otherwise.

#defineTradeChart(tag?)

Registers the element under another tag name, e.g. defineTradeChart("price-chart"). Importing the package already registers trade-chart.

#Chart

new Chart(container: HTMLElement, options?: ChartOptions)

Creates a chart that fills container (give it a size). options is any settings object.

#Data

See Feeding data.

#Settings

#Overlays and alerts

Each add… returns an id. See Overlays.

#Shapes and layers

See Shapes and Layers.

#Indicators

See Indicators.

#Drawings

See Drawings.

#View

#Images

See Images.

#State

See Saved charts.

#Events on Chart

const off = chart.on("alert", (e) => console.log(e.price));
off();                      // or chart.off("alert", handler)

on(name, handler) adds a handler and returns a function that removes it; off(name, handler) removes it too. The names are the ones in Events without tl-.

#Lifecycle

#Events

On <trade-chart> they're DOM CustomEvents named tl-… that bubble, with the data in event.detail. On Chart, use chart.on(name, …) with the name without tl-.

#Functions

#syncCharts(charts, options?)

Links charts so scrolling, zooming and the crosshair move together. charts: Chart objects or <trade-chart> elements in the page. options: { range?: boolean, crosshair?: boolean } (both default true). Returns a function that unlinks them. See Several charts.

#Indicator functions

#Settings and themes

#Time and data

#Types

All types are exported for TypeScript (import type { … } from "tickline").

interface Candle { time: number; open: number; high: number; low: number; close: number; volume?: number }
interface Tick { time: number; price: number; volume?: number }
interface ChartPoint { time: number; price: number }
type ChartType = "line" | "area" | "candles" | "hollow" | "bars" | "heikin-ashi";
type Timeframe = string; // "5s", "1m", "15m", "1h", "4h", "1d", "1w", "1M" …

interface MarkerOptions { time: number; price: number; side?: "buy" | "sell" | "neutral"; text?: string; color?: string }
interface PriceLineOptions {
  price: number; color?: string; label?: string; style?: "solid" | "dashed" | "dotted"; width?: number;
  from?: number; to?: number; axisLabel?: boolean;
}
interface TimeLineOptions { time: number; color?: string; label?: string; style?: "solid" | "dashed" | "dotted"; countdown?: boolean }
interface ZoneOptions { from: number | "top"; to: number | "bottom"; color: string; start?: number; end?: number }
interface AlertOptions { price: number; color?: string; label?: string; once?: boolean }
interface AlertEvent { id: string; price: number; direction: "up" | "down"; time: number; label?: string }

interface ShapeOptions {
  type: "line" | "arrow" | "circle" | "ellipse" | "rect" | "polygon" | "path" | "text" | "image";
  points: ChartPoint[];
  color?: string; fill?: string; width?: number; style?: "solid" | "dashed" | "dotted"; opacity?: number;
  radius?: number; headSize?: number; closed?: boolean;
  text?: string; fontSize?: number; fontWeight?: number | string; textColor?: string; background?: string;
  align?: "left" | "center" | "right"; baseline?: "top" | "middle" | "bottom";
  src?: string; imageWidth?: number; imageHeight?: number;
  zIndex?: "below" | "above";
}
interface LayerOptions { zIndex?: "below" | "above" | "top"; animate?: boolean }
interface LayerContext {
  timeToX(time: number): number; xToTime(x: number): number;
  priceToY(price: number): number; yToPrice(y: number): number;
  width: number; height: number; now: number; theme: Theme;
  live: { time: number; price: number; x: number; y: number } | null;
  range: VisibleRange; candles: readonly Candle[];
}
type LiveMarkerFn = (ctx: CanvasRenderingContext2D, info: { x: number; y: number; color: string; now: number; live: boolean; animated: boolean }) => void;

type DrawingTool = "line" | "trend" | "arrow" | "horizontal" | "vertical" | "rect" | "circle" | "fib" | "measure" | "text";
interface Drawing {
  id: string; tool: DrawingTool; points: ChartPoint[]; color: string;
  width?: number; style?: "solid" | "dashed" | "dotted"; locked?: boolean; hidden?: boolean; text?: string; fontSize?: number;
}

interface IndicatorStyle { colors?: string[]; width?: number; upColor?: string; downColor?: string; bandColor?: string; levels?: number[]; height?: number }
interface IndicatorInfo { key: string; id: string; label: string; params: Record<string, number>; style: IndicatorStyle; placement: "main" | "pane" }
interface IndicatorDefinition {
  id: string; name: string; placement: "main" | "pane";
  params: { name: string; default: number; min?: number; max?: number }[];
  compute(candles: readonly Candle[], params: Record<string, number>): IndicatorOutput;
  label(params: Record<string, number>): string;
  window?: boolean; // false: always compute over every candle (see history.indicatorWindow)
}

interface AnimateOptions { animate?: boolean; duration?: number }
interface HistoryRequest { before: number | null; count: number; timeframe: Timeframe; symbol: string; signal: AbortSignal | undefined }
type HistoryLoader = (req: HistoryRequest) => Promise<readonly Candle[]> | readonly Candle[];
type HistoryState = "idle" | "loading" | "error" | "end";
type Easing = "smooth" | "snappy" | "linear" | "bounce" | ((t: number) => number);

interface CrosshairInfo { time: number; price: number; candle: Candle | null }
interface VisibleRange { from: number; to: number }
interface ImageOptions { type?: "image/png" | "image/jpeg" | "image/webp"; quality?: number; pixelRatio?: number; crosshair?: boolean }
interface ChartState {
  version: 1; type: ChartType; timeframe: Timeframe;
  indicators: { id: string; params: Record<string, number>; style: IndicatorStyle }[];
  drawings: Drawing[]; alerts: AlertOptions[];
  view: { following: boolean; from?: number; to?: number };
}
type ThemeInput = "dark" | "light" | (Partial<Theme> & { base?: "dark" | "light" });

ChartOptions (every field optional) and ResolvedOptions (every field filled in) are described in Configuration; the group types are exported as LayoutOptions, SeriesOptions, GridOptions, PriceScaleOptions, TimeScaleOptions, CrosshairOptions, LegendOptions, LastPriceOptions, LivePositionOptions, WatermarkOptions, InteractionOptions, AnimationOptions (with AnimationDurations), HistoryOptions, DrawingOptions, FormatOptions, Labels and UiOptions. Theme has the keys listed in Configuration → theme.

Edit this page on GitHub