TimeCrosshairLabelConfig

Example

{
  color: '#1a1a1a',
  fontSize: 12,
  backgroundColor: 'white',
  borderWidth: 1,
  borderColor: '#1a1a1a',
  top: 8,
  formatter: ({ utcTs, timeUnit, timeZoneId }) => {
    const date = new Date(utcTs);
    return date.toLocaleString();
  }
}

Properties

Base Props

BoxedTimeLabelConfig

Defaults

Property	Default
top	8
backgroundColor	'white'
borderWidth	1
borderColor	'#1a1a1a'

formatter

• Type: TimeCrosshairLabelFormatter
• Default: defaultTimeCrosshairLabelFormatter.ts

Define a formatter function that returns a formatted date string for the crosshair label.

TimeCrosshairLabelFormatter

type TimeCrosshairLabelFormatter = (args: TimeCrosshairLabelFormatterArgs) => string;

TimeCrosshairLabelFormatterArgs

utcTs

• Type: number

A UTC timestamp in milliseconds.

timeUnit

• Type: 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year'

The current time unit of the chart's time axis.

timeZoneId

• Type: string | null

An optional IANA time zone identifier (e.g. 'America/New_York').

CrosshairTimeFormat

A convenience type for common date format strings used in crosshair label formatters.

type CrosshairTimeFormat = 'ddd DD MMM YY HH:mm' | 'ddd DD MMM YY';

TypeScript

interface TimeCrosshairLabelConfig extends Omit<BoxedTimeLabelConfig, 'formatter'> {
  formatter?: TimeCrosshairLabelFormatter;
}

interface TimeCrosshairLabelFormatterArgs {
  utcTs: number;
  timeUnit: TimeUnit;
  timeZoneId?: string | null;
}

type TimeCrosshairLabelFormatter = (args: TimeCrosshairLabelFormatterArgs) => string;

type CrosshairTimeFormat = 'ddd DD MMM YY HH:mm' | 'ddd DD MMM YY';