Axis titles and labels

Axis titles

The y-axis title is left aligned and placed above the y-axis labels (labels 0-3). The x-axis title is center-aligned and placed underneath the x-axis labels (labels A-C). For typography details, see our page on typography.

It's best to use simple, easy-to-understand descriptors to name your axes titles.

Always use sentence case. This is a capitalization style in which only the first word of a sentence and proper nouns are capitalized, with the rest of the words in lowercase.

Always show the axis title when the nature of displayed data isn't obvious without it.

Don't use titles that are very long. We recommend a maximum of four words. For example: "Shopper count" instead of "Shopper count during October, November, and December in 2022".

Axis labels

These labels indicate the scope and scale of the data being displayed and should reflect the most important data in a chart. They should be used in a consistent way across the interface.

• 𝑥 axis labels are center-aligned to their corresponding data point.
• 𝑦 axis labels are either right-aligned when they are numerical values, or left-aligned when they are categorical values.

For typography details, see our page on typography.

If data is continuous, you can skip some axis labels to not overload the chart. However, we do display missing x-axis labels on hover. This way, we help users to find a specific data point, when scanning through a larger date range.

For bar charts, don't skip axis labels if they describe categories, because in that case the viewer can’t fill in the missing gaps. If the category labels are too long, use a horizontal bar chart instead.

Abbreviations

We use standard abbreviations in order to reduce clutter and increase legibility.

Numbers

We display numbers in a condensed format for thousands and millions. "1,000" becomes "1K", and "1,000,000" becomes "1M".

Punctuation in numbers is language-specific, not currency-specific. When using English, no matter the currency, use periods for decimals and commas to separate groups of thousands.

Currency

We use acronyms for currencies. For example: "EUR" instead of "Euro", "JPY" instead of "Japanese Yen".

We never use currency symbols. That's because most currencies don't have their own symbols.

Percentage

We use the percentage sign to indicate a number or ratio as a fraction of 100.

We round the number up to two digits after the decimal. For example: "21,36%".

Dates

When displaying a single date or a date range as the axis label, we use the month abbreviation and the day number. For example: "Jan 1", "Oct 3".

We don't add a year to an axis label, instead we display it on hover in the tooltip.

We use the American date format: "MM.DD.YYYY".

Days

We use the following abbreviations for days: Mon, Tue, Wed, Thu, Fri, Sat, Sun.

Months

We use the following abbreviations for months: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec.

Time

We use the 12-hour time format. For example: "12am", "6pm".

An axis is a visual representation of a scale, usually a line with reference marks called ticks. Axes can be vertical or horizontal.

This component provides an implementation of the axis guidelines, along with a set of options to customize it.

Visualizations wrapped by an LumeChart component come with two default axes, one for the x scale and another for the y. This can be overriden using the "axes" slot.

Usage

Importing

import { LumeAxis } from '@adyen/lume';

Basic use

To generate an axis, you will need to pass in a d3 scale. It's also recommended to provide a value for type.

<lume-axis
  type="x"
  :scale="myScale"
/>

API

Props

Axis options

Interface: AxisOptions

Default options for X axis

{
  gridLines: false,
  withTitle: false,
  showTicks: true,
  tickCount: 10,
  tickFormat: null,
  tickPadding: 8,
  skip: true,
}

Default options for Y axis

{
  gridLines: true,
  withTitle: true,
  showTicks: true,
  tickCount: 10,
  tickFormat: null,
  tickPadding: 8,
}

Events

click

Fired upon axis click.

Payload

p: {
  index: number | null; // Index of the axis tick that was moused over.
  value: number | string; // Value of the tick label that was moused over.
  event: PointerEvent; // Native `click` event data.
}

mouseenter

Fired upon axis tick mouseenter.

Payload

p: {
  index: number | null; // Index of the axis tick that was moused over.
  value: number | string; // Value of the tick label that was moused over.
  event: MouseEvent; // Native `mouseenter` event data.
}

mouseleave

Fired upon axis tick mouseleave.

Payload

p: MouseEvent; // Native `mouseleave` event data.