Skip to main content

Interface: Options

Full chart configuration options.

Every option can be set when calling race and most can be changed at runtime via Race.changeOptions. Use Partial<Options> when instantiating the chart — unspecified options fall back to their defaults.

See

https://racing-bars.hatemhosny.dev/documentation/options

Properties

autorun

autorun: boolean

Start the race automatically on load.

Defined in

lib/options/options.models.ts:77


caption

caption: string | (currentDate, dateSlice, allDates) => string

Caption displayed below the date counter (bottom-right).

Defined in

lib/options/options.models.ts:49


colorMap

colorMap: string[] | "dark" | "muted" | object | "autumnWarmth" | "berryMix" | "boldContrast" | "boldSunset" | "bright" | "colorblind" | "deep" | "earthyNeutrals" | "elegantPastels" | "forestMystic" | "goldenHour" | "iceCreamDream" | "midnightPastels" | "natureInspired" | "neonLights" | "oceanBreeze" | "pastel" | "pastelDream" | "retroPop" | "softNeutrals" | "softVintage" | "sunsetTones" | "vibrantRedGoldGreen" | "vintageRetro"

Bar colour configuration. Accepts:

  • A named palette string (see available palettes)
  • An array of CSS colour strings
  • An object mapping bar/group names → CSS colour strings

Defined in

lib/options/options.models.ts:90


colorSeed

colorSeed: string | number

Seed value for shuffling colour assignments among bars.

Defined in

lib/options/options.models.ts:92


controlButtons

controlButtons: "all" | "none" | "play"

Show control buttons: 'all', 'play', or 'none'.

Defined in

lib/options/options.models.ts:69


dataShape

dataShape: "long" | "auto" | "wide"

Data shape: 'long', 'wide', or 'auto' (auto-detect from first row keys).

Defined in

lib/options/options.models.ts:21


dataTransform

dataTransform: null | (data) => Data[] | WideData[]

Transform function applied to data before rendering. Return the transformed array.

Defined in

lib/options/options.models.ts:25


dataType

dataType: "auto" | "json" | "csv" | "tsv" | "xml"

Data file format when loading from URL: 'json', 'csv', 'tsv', 'xml', or 'auto'.

Defined in

lib/options/options.models.ts:23


dateCounter

dateCounter: string | (currentDate, dateSlice, allDates) => string

Date counter format string or function (default: 'MM/YYYY').

Defined in

lib/options/options.models.ts:51


endDate

endDate: string

Filter to dates on or before this date string.

Defined in

lib/options/options.models.ts:37


fillDateGapsInterval

fillDateGapsInterval: null | "day" | "month" | "year"

Interval for auto-filling missing dates: 'year', 'month', 'day', or null to disable.

Defined in

lib/options/options.models.ts:31


fillDateGapsValue

fillDateGapsValue: "last" | "interpolate"

How to fill gaps: 'last' (carry forward) or 'interpolate' (linearly interpolate).

Defined in

lib/options/options.models.ts:33


fixedOrder

fixedOrder: string[]

Array of bar names to show in a fixed rank order (supersedes topN).

Defined in

lib/options/options.models.ts:39


fixedScale

fixedScale: boolean

Keep the value axis scale fixed across all dates.

Defined in

lib/options/options.models.ts:65


height

height: string | number

Chart height in pixels, or 'window*{n}' for a fraction of window height.

Defined in

lib/options/options.models.ts:98


highlightBars

highlightBars: boolean

Highlight bars on mouse hover.

Defined in

lib/options/options.models.ts:61


injectStyles

injectStyles: boolean

Inject default CSS into the document head.

Defined in

lib/options/options.models.ts:94


inputHeight

inputHeight: string | number

Internal / legacy input height alias (use height).

Defined in

lib/options/options.models.ts:102


inputWidth

inputWidth: string | number

Internal / legacy input width alias (use width).

Defined in

lib/options/options.models.ts:104


keyboardControls

keyboardControls: boolean

Enable keyboard controls (A=skip-back, S/Space=toggle, D=skip-forward).

Defined in

lib/options/options.models.ts:75


labelsPosition

labelsPosition: "none" | "inside" | "outside"

Label position relative to bars: 'inside', 'outside', or 'none'.

Defined in

lib/options/options.models.ts:53


labelsWidth

labelsWidth: number

Width in pixels of the label area when labelsPosition is 'outside'.

Defined in

lib/options/options.models.ts:55


loop

loop: boolean

Restart the race after reaching the last date.

Defined in

lib/options/options.models.ts:79


makeCumulative

makeCumulative: boolean

Sum values cumulatively across dates for each bar.

Defined in

lib/options/options.models.ts:41


marginBottom

marginBottom: number

Bottom margin inside the SVG (default: 5).

Defined in

lib/options/options.models.ts:114


marginLeft

marginLeft: number

Left margin inside the SVG (default: 0).

Defined in

lib/options/options.models.ts:116


marginRight

marginRight: number

Right margin inside the SVG (default: 20).

Defined in

lib/options/options.models.ts:112


marginTop

marginTop: number

Top margin inside the SVG (default: 0).

Defined in

lib/options/options.models.ts:110


minHeight

minHeight: number

Minimum chart height in pixels (default: 300).

Defined in

lib/options/options.models.ts:106


minWidth

minWidth: number

Minimum chart width in pixels (default: 250).

Defined in

lib/options/options.models.ts:108


mouseControls

mouseControls: boolean

Enable mouse-click controls (single=toggle, double=skip-forward, triple=skip-back).

Defined in

lib/options/options.models.ts:73


overlays

overlays: "repeat" | "all" | "none" | "play"

Show overlay UI: 'all', 'play', 'repeat', or 'none'.

Defined in

lib/options/options.models.ts:71


selectBars

selectBars: boolean

Toggle bar selection on click.

Defined in

lib/options/options.models.ts:63


showGroups

showGroups: boolean

Colour bars by group and show a group legend.

Defined in

lib/options/options.models.ts:59


showIcons

showIcons: boolean

Show icons on bars (uses the icon field in Data).

Defined in

lib/options/options.models.ts:57


startDate

startDate: string

Filter to dates on or after this date string.

Defined in

lib/options/options.models.ts:35


subTitle

subTitle: string | (currentDate, dateSlice, allDates) => string

Chart sub-title text or a function returning a string.

Defined in

lib/options/options.models.ts:47


theme

theme: string

Chart theme: 'light' or 'dark'.

Defined in

lib/options/options.models.ts:83


tickDuration

tickDuration: number

Duration (ms) each date is displayed before advancing (default: 500).

Defined in

lib/options/options.models.ts:122


title

title: string | (currentDate, dateSlice, allDates) => string

Chart title text or a function returning a string.

Defined in

lib/options/options.models.ts:45


topN

topN: number

Maximum number of top-ranked bars to display per date. Overridden by fixedOrder.

Defined in

lib/options/options.models.ts:120


valueDecimals

valueDecimals: number | "preserve"

Number of decimal places to display, or 'preserve' for raw values.

Defined in

lib/options/options.models.ts:27


valueLocale

valueLocale: string

BCP 47 locale tag for number formatting (e.g. 'en-US', 'de-DE').

Defined in

lib/options/options.models.ts:29


width

width: string | number

Chart width in pixels, or 'window*{n}' for a fraction of window width.

Defined in

lib/options/options.models.ts:100