Skip to content

TimeRulerConfig

type TimeRulerConfig = object;
PropertyTypeDescription
autoRender?booleanWhether to automatically re-render when viewport or configuration changes. Default true
autoResize?booleanWhether to automatically resize canvas pixel resolution when container dimensions change. Default true
backgroundColor?stringCanvas background fill color. Default "transparent"
color?stringPrimary color for axis lines, tick marks, and text labels. Default "#a0a0a0"
devicePixelRatio?boolean | numberDevice pixel ratio scaling factor for HiDPI/Retina displays. Default window.devicePixelRatio
font?stringCSS font specification for time labels. Default "10px monospace"
labelColor?stringSpecific color override for text labels. Default color
minMajorPixelSpacing?numberMinimum pixel spacing between adjacent major tick labels. Default 75
renderer?| TimeRulerRendererName | TimeRulerRendererVisual renderer: standard tick lines or segmented boxes. Default "ticks"
tickColor?stringSpecific color override for tick lines. Default color
tickPosition?"top" | "bottom" | "both" | "inside"Tick mark position relative to the ruler baseline. Default "top"
timeFormat?TimeFormatModeNumeric timestamp formatting mode. - “auto”: Adapts precision based on zoom level. - “seconds”: Displays raw seconds (e.g., 12.5s). - “timecode”: Broadcast notation (mm:ss.ms). - “hhmmss”: Clock time (hh:mm:ss). - Custom function (sec: number) => string. Default "auto"