Skip to content
@statistikzh/charts

Axes

Axes show the scales behind your visualization, giving viewers the context they need to understand how the data is mapped. The library provides sensible defaults, but this guide shows you how to customize ticks, labels, and styling when you need finer control.

Responsive behavior

Section titled “Responsive behavior”

Each axis is responsive to the chart’s width and height. The library automatically calculates the number of ticks and their spacing based on the available space. Categorical axes are an exception: they always show all categories, which can lead to overlapping ticks. Make sure you either use categorical values that are short enough to fit or change the orientation of the chart.

Scales

Section titled “Scales”

Each chart type defines its own rules for which scales are supported and how they can be configured. For details on the available scales and their constraints, refer to the documentation of the selected chart type.

Describe an axis with a label

Section titled “Describe an axis with a label”

Both the x-axis and y-axis can display a visible label. Use the label option to define it. In addition to appearing on the axis, this text is also shown in the tooltip to describe the inspected value.

const options = {
  xAxis: {
    label: "Jahr",
  },
  yAxis: {
    label: "Anzahl Personen",
  },
};

The label can be hidden from the axis by setting showLabel: false. It still appears in the tooltip. Hide it when a heading elsewhere on the page, or the legend, already describes what the axis shows.

Format tick labels

Section titled “Format tick labels”

Tick values on time and linear axes are formatted automatically using Swiss German conventions, with nothing to configure. See Formatting and locale for the defaults, and for how tickFormat, tickUnit, extendedFormat, and extendedUnit interact.

The example below combines a label, a custom tickFormat, a tickUnit prefix, and a different extendedFormat for the tooltip.

const options = {
  yAxis: {
    dataKey: "value",
    type: "linear",
    label: "Betrag",
    tickFormat: "d",
    tickUnit: ["$ ", ""],
    extendedFormat: ".2f",
    extendedUnit: ["$ ", " p.P."],
  },
};

Grid lines

Section titled “Grid lines”

Grid lines can be shown or hidden for each axis using the showGrid option.

const options = {
  xAxis: {
    dataKey: "date",
    type: "time",
    showGrid: false,
  },
  yAxis: {
    dataKey: "value",
    type: "linear",
    showGrid: true,
  },
};

showGrid is available for time and linear axes (not categorical).

Stabilize the visual range with a domain

Section titled “Stabilize the visual range with a domain”

The domain option specifies the minimum and maximum values of the axis.

const options = {
  yAxis: {
    type: "linear",
    domain: [60, 100],
  },
};