---
description: The header interval menu of a @titancharts/react chart — Seconds, Minutes, Hours and Days sections that fold, the 25 intervals it offers by default and which of them each kind of market serves, and intervalGroups for reshaping the sections in code.
---

# Interval Menu

The interval menu opens from the chevron next to the interval pills in the chart header. It lists the chart's intervals in four sections — **Seconds**, **Minutes**, **Hours** and **Days** — each sorted by duration, with every row spelled out ("5 minutes", "3 months"). A click on a section header folds or opens that section without closing the menu, and the chart remembers which sections the user folded. Use this page to know what the menu offers and to reshape its sections with `intervalGroups`. Everything here is imported from `@titancharts/react`.


{% hint style="info" %}
Available from `@titancharts/react` 4.5.0 with `@titancharts/data` 4.5.0.
{% endhint %}

---

## What the menu shows

- **Sections.** Seconds, Minutes, Hours and Days, in that order. Days also holds weeks and calendar intervals (`1w`, `1M`, `3M`, `6M`, `1y`). A section with nothing to show is left out.
- **Rows.** Each section is sorted by duration, whatever order the intervals were added in. A row reads "1 second", "15 minutes", "6 months", "1 year"; an interval you registered with your own `shortcutLabel` shows that label instead. The header pills keep the short codes (`15m`, `1h`).
- **Only what the market serves.** An interval the data feed does not serve for the shown market is left out of the menu, not greyed. The interval the chart is on always stays.
- **Folding.** A header shows a chevron that points up while its section is open and down once it is folded. Clicking it does not close the menu or change the interval.
- **Favorites.** A row's star appears when the pointer is over the row, and stays once the interval is starred (on touch screens every star shows). Starred intervals the menu shows become pills next to the chevron, with the current interval, ordered by duration. See [Favorites](favorites.md).
- **Number keys.** `1`–`9` select `1s`, `1m`, `5m`, `15m`, `30m`, `1h`, `4h`, `1d` and `1w`. See [Keyboard Shortcuts](keyboard-shortcuts.md).

---

## The default intervals

A chart created with the built-in `DataFeed` from `@titancharts/data` offers 25 intervals:

| Section | Intervals |
|---|---|
| Seconds | `1s` `5s` `15s` `30s` |
| Minutes | `1m` `2m` `3m` `5m` `10m` `15m` `30m` `45m` |
| Hours | `1h` `2h` `4h` `6h` `8h` `12h` |
| Days | `1d` `3d` `1w` `1M` `3M` `6M` `1y` |

`chart.getIntervals()` returns this list. Calendar bars open on UTC dates: `1M` on the 1st of every month, `3M` on 1 January, 1 April, 1 July and 1 October, `6M` on 1 January and 1 July, `1y` on 1 January. `1w` bars open on Monday 00:00 UTC.

### Which intervals each kind of market serves

The built-in `DataFeed` tells the chart which of these intervals it serves on the shown market, and the menu shows only those:

| Market | Served | Left out |
|---|---|---|
| Crypto (spot and perpetual exchanges, Hyperliquid) | all 25 | — |
| Hyperliquid builder perpetuals (HIP-3) | all 25 | — |
| Prediction markets (Polymarket, HIP-4) | all 25 | — |

On a market that does not serve an interval, `chart.isIntervalSupportedByFeed(code)` returns `false` and `chart.setInterval(code)` moves the chart to the nearest served interval with `interval:rejected` (reason `'unsupported'`). Switching to such a market keeps the current interval.

### Your own data feed

A custom `IDataFeed` that implements `getSupportedIntervals` gets the same 25 intervals: the chart passes the market it shows and the intervals it knows, and offers the codes your feed returns. A feed without `getSupportedIntervals`, or a chart fed through `fetchMainData`, offers the nine built-in intervals (`1s` `1m` `5m` `15m` `30m` `1h` `4h` `1d` `1w`) plus the codes you register. See [Custom Intervals](custom-intervals.md#feed-support-which-intervals-a-market-serves).

To offer a different list, call `chart.setIntervals(codes)` — the menu groups whatever the list holds.

---

## Reshaping the sections

Pass `intervalGroups` to arrange the menu: an ordered array of groups. The interval list (`getIntervals()`) still decides which intervals the chart offers; the groups only decide where the menu shows them.

```tsx
import { TitanChart } from '@titancharts/react';

<TitanChart
  intervalGroups={[
    { id: 'scalp', label: 'Scalp', intervals: ['15s', '1m', '5m'] },
    { id: 'minutes', intervals: ['15m', '30m'] },
    { id: 'hours', collapsed: true },
    { id: 'days', label: 'Swing', intervals: ['1d', '1w', '1M'] },
  ]}
/>;
```

This menu has no Seconds section, a **Scalp** section first, Minutes with two rows, Hours folded until the user opens it, and Days renamed **Swing** with three rows. The same array works as the `intervalGroups` option of `TitanChartController.create()`, and at any time through `chart.setIntervalGroups()`.

### IIntervalGroup

| Property | Type | Description |
|---|---|---|
| `id` | `'seconds' \| 'minutes' \| 'hours' \| 'days' \| string` | A built-in section id, or your own. Unique within the array. |
| `label` | `string` | Header text. Defaults to Seconds, Minutes, Hours or Days for a built-in id, else the id. |
| `intervals` | `IntervalCode[]` | The codes this section shows. A built-in id without it shows every listed interval of its duration; your own id needs it. |
| `collapsed` | `boolean` | Whether the section starts folded. Defaults to `false`. |

Where a listed interval goes, first match wins:

1. The first group whose `intervals` names it.
2. Otherwise the built-in group of its duration — `seconds`, `minutes`, `hours`, or `days` (days, weeks and calendar intervals) — when that group is in the array without `intervals` of its own.
3. A tick interval no group names is shown above the sections, without a header.
4. Otherwise it is not in the menu. It stays in `getIntervals()`, so `setInterval()` and saved states still reach it.

Leaving a built-in id out removes that section. A code a group names but the interval list does not hold is not shown — add it with `registerInterval()` or `setIntervals()`. An empty array is refused with a warning. A group without an `id`, a repeated `id`, or an own-id group without `intervals` is dropped with a warning.

### Interval group methods

```ts
// Replace the menu's sections, in order.
chart.setIntervalGroups(groups: IIntervalGroup[]): void

// The sections in menu order, `label` filled in; `collapsed` says whether
// each section is folded now (the user's choice, else your default).
chart.getIntervalGroups(): IIntervalGroup[]

// Fold or open one section, as a click on its header does. Saved with the chart state.
chart.setIntervalGroupCollapsed(id: string, collapsed: boolean): void
```

`intervalGroups:change` fires with `{ groups }` (the value of `getIntervalGroups()`) when `setIntervalGroups()` changes the sections, when a section is folded or opened, and when a restore changes which sections are folded. `intervals:change` announces changes to the list itself.

---

## Folded sections are chart state

The sections a user folds or opens are saved in the chart state as `intervalGroupCollapse`, next to `favorites`: `getState()` writes it and `restoreState()` applies it, so a layout you persist with `onStateChange` reopens with the same sections folded. It records only the sections the user clicked; the others follow your `collapsed` default. `getState({ includeFavorites: false })` leaves it out, like the favorites. Your `setIntervalGroups()` calls are configuration, not chart state, and do not trigger `onStateChange`.

```ts
chart.setIntervalGroupCollapsed('seconds', true);
chart.getState().intervalGroupCollapse; // { seconds: true }
```

---

## Styling

The menu has the colors of the other header dropdowns. The panel reads the [Dropdown Panels](shell/styling.md#dropdown-panels) variables, and its section headers `--tc-dropdown-panel-label`. Rows use `--tc-shell-text`, with `--tc-footer-btn-hover-bg` under the pointer and `--tc-footer-btn-active-bg` on the current interval; the line between sections is `--tc-shell-border`. Stars follow the [favorites star variables](favorites.md#theming).

---

## Related

- [Custom Intervals →](custom-intervals.md) — register your own codes and calendar or tick intervals.
- [Interval Changes →](interval-change.md) — what happens when the interval changes.
- [Favorites →](favorites.md) — stars and pinned pills.
- [Chart Methods → Interval methods →](../api-reference/chart-methods.md#interval-methods)