Skip to main content
The axis system provides visual reference for data values, including axis lines, labels, and grid lines.

​
AxisLayer

Renders X and Y axes with labels, tick marks, and theme support.

​
Constructor

new AxisLayer(container: HTMLElement, zIndex: number, config?: AxisConfig)
​
container
HTMLElement
required
The DOM element to attach the canvas layer to
​
zIndex
number
required
The stacking order of this layer
​
config
AxisConfig
Configuration options for axis appearance and behavior

​
Methods

​
setScales
(xScale: Scale, yScale: Scale) => void
Sets the scale objects used to convert data values to pixel positions
axisLayer.setScales(xScale, yScale);
​
draw
() => void
Renders the axes and labels to the canvas
axisLayer.draw();

​
AxisConfig

Configuration interface for customizing axis appearance and behavior.
​
visible
boolean
default:"true"
Whether to display the axes
​
type
'numeric' | 'datetime' | 'categorical'
default:"'numeric'"
The type of data being displayed
​
min
number
Minimum value for the axis domain (overrides auto-calculated range)
​
max
number
Maximum value for the axis domain (overrides auto-calculated range)
​
xTickCount
number
default:"10"
Number of tick marks to display on the X axis
​
yTickCount
number
default:"10"
Number of tick marks to display on the Y axis
​
xLabelFormat
(val: number) => string
Custom formatter function for X axis labels
xLabelFormat: (val) => `$${val.toFixed(2)}`
​
yLabelFormat
(val: number) => string
Custom formatter function for Y axis labels
yLabelFormat: (val) => `${val}%`
​
gridColor
string
Color of the grid lines (CSS color value)
​
textColor
string
Color of the axis labels. If not specified, uses theme-based colors
​
font
string
default:"'12px sans-serif'"
CSS font specification for axis labels
​
theme
'light' | 'dark'
default:"'light'"
Visual theme for the axes
​
scrollable
boolean
Whether the axis supports scrolling (for large datasets)

​
Smart label formatting

When no custom yLabelFormat is provided, the Y axis automatically formats large numbers for better readability:
  • Values >= 1,000,000 display as “M” (millions): 2.5M
  • Values >= 1,000 display as “K” (thousands): 15K
  • Values >= 1 display with up to 1 decimal place: 42.5
  • Values < 1 display with up to 2 decimal places: 0.25
Trailing zeros are automatically removed for cleaner labels.

​
Example

const axisLayer = new AxisLayer(container, 20, {
  theme: "dark",
  xTickCount: 8,
  yTickCount: 6,
  yLabelFormat: (val) => `$${val}`,
  font: "14px Inter, sans-serif"
});

​
GridLayer

Renders a grid of horizontal and vertical lines for visual reference.

​
Constructor

new GridLayer(container: HTMLElement, zIndex: number)
​
container
HTMLElement
required
The DOM element to attach the canvas layer to
​
zIndex
number
required
The stacking order of this layer (typically lower than data layers)

​
Methods

​
setScales
(xScale: Scale, yScale: Scale) => void
Sets the scale objects used to position grid lines
gridLayer.setScales(xScale, yScale);
​
draw
() => void
Renders the grid to the canvas
gridLayer.draw();

​
Example

const gridLayer = new GridLayer(container, 5);
gridLayer.setScales(xScale, yScale);
gridLayer.draw();

​
Notes

  • Grid draws 10 vertical and 10 horizontal lines by default
  • Grid color is hardcoded to #333 (consider using GridLayer for backgrounds)
  • Grid lines span the full range of each axis

Build docs developers (and LLMs) love

Get started for freeTalk to us