Style Type Reference

Looking for what to change? Use the topic guides — each lists every property with a description and example.

This page shows the top-level TypeScript shapes only. Nested property shapes are available through Styles and IDE autocomplete.

When overriding styles, you only need to include the properties you want to change.

Import

Import the types you need from @chartspire/ui:

import type {
  CustomStyleOverrides,
  Styles,
  DeepPartial,
  GridStyle,
  CandleStyle,
  IndicatorStyle,
  AxisStyle,
  SeparatorStyle,
  CrosshairStyle,
  OverlayStyle,
  CandleType,
} from '@chartspire/ui'

You can also annotate a partial group without naming every nested type:

import type { DeepPartial, Styles } from '@chartspire/ui'

const candleOverrides: DeepPartial<Styles['candle']> = {
  bar: { upColor: '#26a69a', downColor: '#ef5350' },
}

DeepPartial

DeepPartial<T> makes every property in T optional, including nested objects. That matches how style overrides work: you only pass what you want to change; everything else keeps its default.

Used by CustomStyleOverrides and setCustomStyles().

import type { DeepPartial, Styles } from '@chartspire/ui'

// Valid — only the fields you change
const overrides: DeepPartial<Styles> = {
  candle: { bar: { upColor: '#26a69a' } },
}

CustomStyleOverrides

Widget-level style config for customStyles / setCustomStyles. Choose where overrides apply: every theme, light only, dark only, or a named theme.

interface CustomStyleOverrides {
  /** Styles to apply to all themes */
  global?: DeepPartial<Styles>
  /** Styles to apply to light themes only */
  light?: DeepPartial<Styles>
  /** Styles to apply to dark themes only */
  dark?: DeepPartial<Styles>
  /** Styles to apply to specific themes by name */
  themes?: Record<string, DeepPartial<Styles>>
}

Styles

The root chart style object. Each key is documented on its own page.

interface Styles {
  grid: GridStyle        // → [Grid](./grid.md)
  candle: CandleStyle    // → [Candles](./candles.md)
  indicator: IndicatorStyle  // → [Indicators](./indicators.md)
  xAxis: AxisStyle       // → [Axis](./axis.md)
  yAxis: AxisStyle       // → [Axis](./axis.md)
  separator: SeparatorStyle  // → [Separator](./separator.md)
  crosshair: CrosshairStyle  // → [Crosshair](./crosshair.md)
  overlay: OverlayStyle  // → [Overlays](./overlays.md)
}

Style groups

Immediate structure of each group. See the linked page for all configurable properties.

GridStyle

Background grid lines on the chart pane. See Grid.

interface GridStyle {
  show: boolean
  horizontal: StateLineStyle
  vertical: StateLineStyle
}

CandleStyle

Candlestick / OHLC / area appearance, price marks, and candle tooltips. See Candles. candle.tooltip is also covered on Tooltips.

interface CandleStyle {
  type: CandleType
  bar: CandleBarColor
  area: CandleAreaStyle
  priceMark: CandlePriceMarkStyle
  tooltip: CandleTooltipStyle
  renko?: RenkoStyle
}

IndicatorStyle

Default colors and tooltips for indicator series (bars, lines, circles). See Indicators.

interface IndicatorStyle {
  ohlc: Pick<CandleBarColor, 'compareRule' | 'upColor' | 'downColor' | 'noChangeColor'>
  bars: IndicatorPolygonStyle[]
  lines: SmoothLineStyle[]
  circles: IndicatorPolygonStyle[]
  lastValueMark: IndicatorLastValueMarkStyle
  tooltip: IndicatorTooltipStyle
  [key: string]: unknown
}

AxisStyle

Used by both xAxis and yAxis for axis line, ticks, and labels. See Axis.

interface AxisStyle {
  show: boolean
  size: number | 'auto'
  axisLine: AxisLineStyle
  tickLine: AxisTickLineStyle
  tickText: AxisTickTextStyle
}

SeparatorStyle

The drag handle between the main chart and indicator panes. See Separator.

interface SeparatorStyle {
  size: number
  color: string
  fill: boolean
  activeBackgroundColor: string
}

CrosshairStyle

Crosshair lines and axis labels when hovering the chart. See Crosshair.

interface CrosshairStyle {
  show: boolean
  horizontal: CrosshairDirectionStyle & { features: TooltipFeatureStyle[] }
  vertical: CrosshairDirectionStyle
}

OverlayStyle

Default look for drawing tools (points, lines, shapes, text). See Overlays.

interface OverlayStyle {
  point: OverlayPointStyle
  line: SmoothLineStyle
  rect: RectStyle
  polygon: PolygonStyle
  circle: PolygonStyle
  arc: LineStyle
  text: TextStyle
  [key: string]: unknown
}