Date-Time Category

Demo & usage

More examples

<sv-datetime-category-chart [categories]="days" [series]="series" [options]="{ zoom: 'month' }" />

<sv-datetime-category-chart [categories]="days" [series]="series" locale="de-DE" />

When to use

• A series whose x-axis is dates and whose labels should read as dates.
• When the axis needs to switch between daily, monthly and yearly granularity.
• For a plain ordered axis with no date semantics, the Line Chart is simpler — it never parses a date at all.

Async states

• loading
• empty
• error
• retry

Outputs

<sv-datetime-category-chart-pro>

Also in this family — SvDateTimeCategoryChartProComponent from @styloviz-pro/charts.

Inputs

Outputs

Wire it to your API

This component is headless about transport: it renders what you give it and reports what the user asks for. Nothing below requires @styloviz/data — drive it from whatever you already use.

<sv-datetime-category-chart
  [series]="data.items()"
  [loading]="data.loading()"
  [error]="data.error()"
  [filtered]="data.filtered()"
  (retry)="data.reload()"
/>

// This component reports its state but does not emit a query, so drive
// it from your own fetch and bind the three async inputs.
readonly items = signal<Row[]>([]);
readonly loading = signal(false);
readonly error = signal<SvDataError | null>(null);

async load(): Promise<void> {
  this.loading.set(true);
  this.error.set(null);
  try {
    this.items.set(await this.api.fetchRows());
  } catch (e) {
    this.error.set(toSvDataError(e));
  } finally {
    this.loading.set(false);
  }
}

• This component does not emit a query, so it renders what you give it. Fetch on your own trigger and bind `series`, `loading` and `error`.
• Set `filtered` when a search or filter is active. It is the difference between "you have no orders" and "no orders match this filter" — telling a customer with 4,000 orders the first one reads as a bug.
• Normalize failures with `toSvDataError()` from `@styloviz/core`. It derives `retryable` from the status, so a 404 does not get a "Try again" button that can only fail again.

Full walkthrough: Connecting to a backend.

Customization & theming

• Day, month and year zoom levels.
• Per-chart locale override, defaulting to the app's LOCALE_ID.
• Area or line rendering per series, with the usual grid and legend switches.

Best practices

• Do: Keep the categories as ISO strings. They are the join key for the series as well as the source of the labels, and a localised key would differ between two people looking at the same dashboard.
• Do: Let the locale come from the app. It defaults to LOCALE_ID — the same value DatePipe resolves — so a correctly configured application gets matching labels everywhere. Set it per chart only for a report that must read in one fixed language whoever opens it.
• Tip: A bare YYYY-MM-DD is a calendar day, and this chart reads it as one in local time. ECMA-262 requires the date-only form to parse as UTC midnight, which is why a naive implementation labels a daily axis a day early for everyone west of Greenwich.

Accessibility

• The axis label, the tooltip and the accessible name are formatted once from one function, so the three cannot disagree about what day a column is.
• An unparseable category falls back to the raw string the host sent rather than printing "Invalid Date" down the whole axis.