Formatting and locale

@statistikzh/charts formats every number and date using Swiss German conventions (de-CH).

Numbers

Without a manually defined tickFormat, numbers use a comma as the decimal separator and an apostrophe to group thousands.

Tick values on time and linear axes are formatted automatically, adjusting their precision to match the step size between tick values. A step of 0.1 produces ticks with one decimal place like 0.1, 0.2, 0.3, while a step of 0.01 produces 0.01, 0.02, 0.03. Time axes follow the same principle, but with date formats instead.

The tickFormat option can be used to override the default behaviour and manually define how tick values are formatted. It accepts a D3 format specifier string for linear axes and a D3 time format specifier string for time axes.

{
  "height": 260,
  "xAxis": {
    "dataKey": "date",
    "type": "time",
    "tickFormat": "%Y"
  },
  "yAxis": {
    "dataKey": "value",
    "type": "linear",
    "showGrid": true
  },
  "tooltip": {
    "isEnabled": true
  }
}

The y-axis ticks read 0, 5'000, 10'000, and so on, with no tickFormat set. Setting tickFormat to a D3 format specifier still uses the same locale, so ",.1f" on a value of 12345.6 renders 12'345,6, not 12,345.6.

Dates

Without a tickFormat, a time axis picks the shortest label that stays unambiguous for the space available, using German month and day names.

{
  "height": 260,
  "groupByKey": "name",
  "xAxis": {
    "dataKey": "date",
    "type": "time"
  },
  "yAxis": {
    "dataKey": "value",
    "type": "linear",
    "showGrid": true
  },
  "tooltip": {
    "isEnabled": true
  }
}

Setting tickFormat to a D3 time format specifier also uses German names; "%B" renders Januar, "%b" renders Jan, and so on.

Only date-only values (YYYY-MM-DD, as required by Preparing data) are guaranteed to render on the day you intended. Timestamps that include a time component or a UTC offset are parsed and displayed in UTC, which can shift the value onto a different day in Swiss local time.

`tickFormat` vs. `extendedFormat`

tickFormat and tickUnit control the label on the axis itself. extendedFormat and extendedUnit control the value shown in the tooltip. If you don’t set them, the tooltip falls back to the axis’s own format. Set them only when the tooltip needs a different precision or unit than the axis. See the tooltip guide for an example.

Units

tickUnit and extendedUnit add a fixed prefix or suffix after the value has been formatted. Use them for units a D3 format specifier can’t produce, such as a currency symbol.

const options = {
  yAxis: {
    dataKey: "value",
    type: "linear",
    tickFormat: "d",
    tickUnit: ["$ ", ""],
  },
};

D3’s built-in $ format specifier is locale-aware too, but it renders the Swiss franc suffix (" CHF"). Use tickUnit instead if your values are in a different currency.

See Axis options for the exact type and default of each of these options.