Skip to content
EliteChart

Resolutions

The timeframe contract — bar widths from one second to one month, expressed as compact strings.

A resolution (or "timeframe") is the bar width — how many seconds of price movement each bar covers. ChartForge expresses resolutions as compact strings ('1s', '15m', '4h', '1d', '1M') so they round-trip cleanly through URLs, JSON, and humans.

Quick example

code
'use client';
import { EliteChart } from '@elitechart/elitechart';
import '@elitechart/elitechart/styles.css';

export default function Page() {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <EliteChart symbol="BTCUSD" timeframe="15m" />
    </div>
  );
}

How it works

Resolutions are strings of the form <number><unit>. Units:

  • s — seconds
  • m — minutes
  • h — hours
  • D (or d) — days
  • W (or w) — weeks
  • M — months

The resolution flows through three layers:

  1. The host app sets <EliteChart timeframe="..." /> or calls useChartStore.setTimeframe(...).
  2. Internally, the resolution is parsed into seconds via the parseResolution() helper (re-exported from @elitechart/elitechart).
  3. The datafeed receives the original string in getBars and subscribe so it can use whatever native representation the backend prefers.

Default selector

The top-bar resolution selector exposes:

1s · 5s · 15s · 1m · 5m · 15m · 30m · 1h · 4h · 1D · 1W · 1M

Custom values are accepted at the prop / store level — the selector just doesn't display unknown values. For a custom selector list, see recipes/customize-toolbar.

Variations

Lock the resolution

code
<EliteChart timeframe="1h" symbol="BTCUSD" />

Drive from a URL parameter

code
'use client';
import { useSearchParams } from 'next/navigation';
import { EliteChart } from '@elitechart/elitechart';

export default function Page() {
  const tf = useSearchParams().get('tf') ?? '1h';
  return <EliteChart timeframe={tf} symbol="BTCUSD" />;
}

API

SymbolFromType
Resolution@elitechart/elitechartstring literal pattern
parseResolution(s)@elitechart/elitechart(s: string) => number (seconds)
formatResolution(secs)@elitechart/elitechart(n: number) => string