Axis

Creates an SVG scale based on an array of data.

Basic example

A linear [0, 100] domain is spread across the 600px width with auto-generated ticks and a title; the base class defaults to bottom orientation.

Edit codeGet the code

Reset

const config = {
  domain: [0, 100],
  width: 600,
  height: 120,
  title: "Axis",
};

Log scale

scale: "log" spaces the ticks by powers of ten, so a [1, 10000] domain gets a major tick per decade with minor ticks between them. Values must stay above zero on a log axis.

Edit codeGet the code

Reset

const config = {
  domain: [1, 10000],
  height: 120,
  scale: "log",
  title: "Log scale",
  width: 600,
};

Pow scale

scale: "pow" with an exponent below 1 spreads the small values out and squeezes the large ones together, so values that span several orders of magnitude, including 0, share one axis. The ticks are spaced evenly along it and rounded. Above 1 the effect reverses; the default of 1 draws like a linear axis.

Edit codeGet the code

Reset

const config = {
  domain: [0, 1000000],
  exponent: 0.3,
  height: 120,
  scale: "pow",
  title: "Power scale, exponent 0.3",
  width: 600,
};

Time scale

scale: "time" takes a domain of dates and labels the ticks with the date format that suits their spacing, years here; timeLocale swaps in another language’s month and day names.

Edit codeGet the code

Reset

const config = {
  domain: [new Date(2020, 0, 1), new Date(2024, 11, 31)],
  height: 120,
  scale: "time",
  title: "Time scale",
  width: 600,
};

Ordinal scale

scale: "band" (or "point", or "ordinal") treats the domain as a list of categories and gives each one an equal slot, with paddingInner and paddingOuter controlling the gaps. Bar charts place their bars on an axis like this.

Edit codeGet the code

Reset

const config = {
  domain: ["Q1", "Q2", "Q3", "Q4"],
  height: 120,
  scale: "band",
  title: "Band scale",
  width: 600,
};

Ticks and format

ticks pins where the tick marks go and labels which of them get text (by default the axis thins labels to what fits, independently of ticks), tickFormat turns each value into its label, tickSize is the length of the tick marks, and gridSize extends grid lines from the ticks across the chart area.

Edit codeGet the code

Reset

const config = {
  domain: [0, 100],
  gridSize: 60,
  height: 160,
  labels: [0, 25, 50, 75, 100],
  tickFormat: d => `$${d}k`,
  ticks: [0, 25, 50, 75, 100],
  tickSize: 8,
  title: "Revenue",
  width: 600,
};

Configuration

import {Axis} from "@d3plus/core";

Extends BaseClass.

Filter 18 config keys

barConfigrecord

Axis line style.

baselineBreakConfigrecord

Style of the break drawn when baselineBreak is on and the domain stops short of baseline: space (pixels of axis between the baseline tick and the first tick after the break), gap (pixels between the two break marks, where the axis line is not drawn), size (length of each mark, drawn outward from the axis line on the tick side so it never reaches into the plot), angle (degrees each mark tilts from perpendicular), lines and lineConfig (the lines a Plot runs across the plot from each mark, as in breakConfig), mask (whether a Plot cuts the gap between those lines across the shapes, default true), plus stroke/stroke-width and other line styles for the marks.

breakConfigrecord

Style of the breaks set with break: space (pixels of axis each break occupies), gap (pixels between its two marks, where the axis line is not drawn), size (length of each mark, drawn outward from the axis line on the tick side so it never reaches into the plot), angle (degrees each mark tilts from perpendicular), lines (whether a Plot runs a line across the plot from each mark, default true), lineConfig (those lines' style — stroke, stroke-width, … — over the axis line's barConfig style), mask (whether a Plot cuts the gap between the lines across the shapes, default true), plus stroke/stroke-width and other line styles for the marks.

classNamestring | array.<string> | undefined

CSS classes added to the outermost element this chart or component draws into, next to its fixed d3plus classes, so page CSS can target it: a chart's root <svg class="d3plus-viz"> (its <canvas> with the Canvas renderer) and a standalone component's <svg>. Takes a space-separated string or an array. A new value replaces the classes the previous one added; unset adds none. Tooltips take their own tooltipConfig.className.

colorDefaultscolordefaultsconfig

Overrides the default colors used when assigning fills from data and choosing legible text colors: dark and light (the text colors picked for contrast against a background), missing (null/undefined values), on/off (true/false values), sequential (the anchor hue for magnitude ramps), and scale (the categorical palette, given as a d3 ordinal scale or an array of colors). Keys are merged into the current defaults, and a Viz passes its overrides down to the shapes and components it draws.

configd3plusconfig

Methods that correspond to the key/value pairs and returns this class.

dataarray.<unknown>Default [ ]

An array of data points, which helps determine which ticks should be shown and which time resolution should be displayed.

gridConfigrecord

Grid config of the axis.

labelRotationnumber | boolean | undefined

Whether to rotate the axis labels, and by how much. true rotates them -90 degrees and false keeps them flat. Left undefined (the default), a horizontal axis of categories rotates its labels when any label would not fit its share of the axis whole (a word dropped, cut off, or broken across lines) or would overlap its neighbor: they slant 30 degrees (-30 on a bottom axis, 30 on a top one), or stand at -90 when even slanted they would leave more labels cut short or hidden. A vertical axis never rotates its labels on its own. A number rotates them by that many degrees (clockwise, so -45 rises to the right): each label hangs off the axis from the end of its text nearest the axis, which sits across from its tick, so on a bottom axis a negative angle ends each label at its tick and a positive one starts it there. Angles outside -90 to 90 turn a half turn to read left to right (135 draws as -45), and 0 keeps the labels flat. Slanted labels wrap between words onto up to three lines, as many as fit between neighboring labels, so they reach less far from the axis. Labels that still overlap once rotated are thinned evenly.

localestring | object

The locale used for all text and number formatting. Supports the locales defined in d3plus-format. The locale can be a complex Object, a locale code (like "en-US"), or a 2-digit language code (like "en"). If a 2-digit code is provided, the "findLocale" function is used to identify the most approximate locale.

onstring

Event listener for the specified event typenames. Mirrors the core d3-selection behavior.

orientstringDefault bottom

The orientation of the shape.

parentunknown

Parent config used by the wrapper.

renderfunction

Renders the current Axis to the page.

selectstring | htmlelement | null | undefined

The SVG container element as a d3 selector or DOM element.

Passing null or undefined deliberately leaves the axis unmounted — renderMode("compute") plus select(null) produces a scene-only axis (no detached SVG fallback). This is the formal contract callers in plotPaint use to compute axis layout without mounting DOM.

shapeConfigd3plusconfig

Configuration object with key/value pairs applied as method calls on each shape.

titleConfigrecord

Title configuration of the axis.

translatefunction

Defines how informational text strings should be displayed. By default, this function will try to find the string in question (which is the first argument provided to this function) inside of an internally managed translation Object. If you'd like to override to use custom text, simply pass this method your own custom formatting function.