Axis

Customize the time axis (bottom) and price axis (right). Both axes share the same properties — use the xAxis or yAxis prefix.

← Back to Custom Styles overview

Copy the property path into your setCustomStyles config. You only need to include the values you want to change.

Time axis (xAxis)

Property	Description	Type	Example
xAxis.show	Show or hide the time axis	boolean	true
xAxis.size	Height of the axis area	number | 'auto'	'auto'
xAxis.axisLine.show	Show the main axis line	boolean	true
xAxis.axisLine.color	Color of the main axis line	color	'#d0d0d0'
xAxis.axisLine.size	Thickness of the main axis line	number	1
xAxis.tickLine.show	Show small tick marks	boolean	true
xAxis.tickLine.color	Color of tick marks	color	'#DDDDDD'
xAxis.tickLine.length	Length of tick marks	number	3
xAxis.tickText.show	Show date/time labels	boolean	true
xAxis.tickText.color	Color of date/time labels	color	'#76808F'
xAxis.tickText.size	Font size of labels	number	12
xAxis.tickText.family	Font family of labels	string	'Helvetica Neue'
xAxis.tickText.weight	Font weight of labels	string | number	'normal'

Price axis (yAxis)

Same properties as the time axis — replace xAxis with yAxis.

Property	Description	Type	Example
yAxis.show	Show or hide the price axis	boolean	true
yAxis.size	Width of the axis area	number | 'auto'	'auto'
yAxis.axisLine.show	Show the main axis line	boolean	true
yAxis.axisLine.color	Color of the main axis line	color	'#d0d0d0'
yAxis.axisLine.size	Thickness of the main axis line	number	1
yAxis.tickLine.show	Show small tick marks	boolean	true
yAxis.tickLine.color	Color of tick marks	color	'#DDDDDD'
yAxis.tickLine.length	Length of tick marks	number	3
yAxis.tickText.show	Show price labels	boolean	true
yAxis.tickText.color	Color of price labels	color	'#76808F'
yAxis.tickText.size	Font size of labels	number	12
yAxis.tickText.family	Font family of labels	string	'Helvetica Neue'
yAxis.tickText.weight	Font weight of labels	string | number	'normal'

Example

chart.setCustomStyles({
  light: {
    xAxis: { axisLine: { color: '#d0d0d0' } },
    yAxis: { axisLine: { color: '#d0d0d0' } },
  },
})

Developers who need full TypeScript interfaces can use the type reference.