Axes

Configure the X axis with xAxis and Y axes with yAxis. Choose an axis type, then adjust limits, ticks, and labels.

Axis limits and tick roundingAxis limits and tick rounding

Use min and max to set axis limits. Numeric axes accept numbers, datetime axes accept timestamps, and category axes accept category indices after ordering. Category limits are not supported for waterfall and heatmap charts.

startOnTick and endOnTick round the corresponding limits outward to convenient tick values, including explicitly set limits. For exact linear limits, set both to false. These options default to true for X axes and datetime Y axes, and false for linear/logarithmic Y axes.

Two linear Y axes in the same plot synchronize their ticks when both enable startOnTick and endOnTick. Logarithmic axes calculate their ticks independently.

Axis paddingAxis padding

Markers at an axis limit can be clipped by the plot edge. Automatic axis padding extends the value range just enough to fit them, including their hover state. Ticks and grid lines cover the extended range as usual.

This example makes room for markers at the free limits:

xAxis: {
    padding: {min: 'auto', max: 'auto'},
}

Set min, max, or both inside padding. They refer to the minimum and maximum values, including on reversed axes. An omitted minimum adds no space; an omitted maximum keeps the existing maxPadding behavior.

Choosing a sizeChoosing a size

• Automatic — use 'auto' to fit markers, their borders, enabled hover sizes, and visible scatter halos. It reuses space already available in the range. Space is reserved before hovering, so hovering does not move the axes.
• Pixels — use a nonnegative number or pixel string, such as 12 or '12px'.
• Percentages — extend the chosen boundary by a share of the axis value range before padding. Both sides use the same range, taken from the data extent and any explicit limits.

For a linear range of [0, 100], this configuration extends the minimum by 10 and the maximum by 25, giving [-10, 125] before space for bars and labels and tick rounding:

padding: {
    min: '10%',
    max: '25%',
}

Percentages do not describe fractions of the final visible width or height. Pixel and automatic sizes add space beyond the otherwise computed range. Tick rounding can leave more space than requested.

Oversized padding requests are bounded to keep a usable scale; markers can still clip when the chart is too small.

On a logarithmic axis, percentages extend the original logarithmic span. For [1, 100], setting both ends to '25%' produces approximately [0.316, 316.23] before other offsets and rounding. Equal percentages extend both sides equally in scale coordinates, independently of axis direction.

An omitted maximum continues to use maxPadding and its defaults. On a logarithmic axis, that calculation differs from an explicit percentage. Set both padding.min and padding.max to control both ends with the percentage rule.

Limits and ticksLimits and ticks

Padding extends only free boundaries. An explicit min or max takes precedence on that side. startOnTick and endOnTick can round the extended boundaries outward.

For percentages on X, tick rounding uses the range before padding. The percentage extension itself is not rounded: [0, 100] with padding.max: '25%' ends at 125 even with endOnTick: true, and that boundary can fall between ticks.

Supported seriesSupported series

Automatic padding measures markers in line, area, area-range, and scatter series. Labels and tooltips do not contribute. Other Cartesian series on the same axis use the extended range too. Explicit sizes work on continuous axes regardless of series type.

// Before
const before = {maxPadding: 0.25};

// After
const after = {padding: {max: '25%'}};

LabelsLabels

See Axis labels for label styling and HTML labels.

Related guidesRelated guides

• See Value Formatting for number and datetime label formatting.
• See Theming for axis grid-line and tick-mark colors.