Date axis

Time-series data uses a category axis with type: 'date'. Combined with scale: 'linear', each point is positioned by its actual date — note the uneven horizontal spacing below matching the gaps in the data.

Open in demo ↗

// A linear date category axis positions each point by its actual date, so uneven
// sampling shows as uneven spacing. Dates arrive as ISO strings.
import type { MochartInputConfig } from '@mochart/core';

export const config: MochartInputConfig = {
  version: '1.0.0',
  title: { text: 'Active Users' },
  categoryAxis: {
    property: 'date',
    type: 'date',
    scale: 'linear',
    tickLabel: { format: '%b %d' }
  },
  seriesDefaults: { renderer: 'area' },
  series: [{ property: 'users', title: 'Active users' }]
};

export const data = [
  { date: '2026-06-01T00:00:00Z', users: 120 },
  { date: '2026-06-02T00:00:00Z', users: 132 },
  { date: '2026-06-03T00:00:00Z', users: 101 },
  { date: '2026-06-05T00:00:00Z', users: 154 },
  { date: '2026-06-08T00:00:00Z', users: 148 },
  { date: '2026-06-09T00:00:00Z', users: 170 },
  { date: '2026-06-12T00:00:00Z', users: 190 }
];

How it works

• Date values in the data can be ISO strings (as in the example above), Date objects, or millisecond timestamps. dateUTC decides whether ticks are placed and labels formatted in UTC or local time. It defaults to true, so set it to false for data whose day boundaries are local ones.
• tickLabel.format takes a d3 time-format string for date axes ('%b %d' → "Jun 01"), as does the category axis valueFormat shown in the tooltip.
• With scale: 'ordinal' instead, dates are spaced evenly in data order — useful when the gaps are noise (e.g. trading days).
• min / max (and the soft bounds) window a linear date axis; they take an ISO date string or a timestamp — see axis bounds.
• A date that is present but has no value is a gap in the shape; missingValueMode chooses whether the shape breaks there (default), connects across it, or drops to the base.
• The area renderer fills to the value axis base when one is set; with no base set — the default for an axis without stacks, as here — it fills to the minimum end of the axis. Swap in line or bar per series via renderer.