Time Series

/examples/line/line-chart-time-series.js

Time Series is the chart for long date-based series where the main problem is navigation, not drawing a line. Price history, balances, revenue, traffic, sensor data: the moment the dataset stops fitting into one comfortable view, you need a way to switch windows without rebuilding the chart by hand.

In RareCharts, this module combines three things:

• a main line chart for the active date window
• a range bar with preset buttons, if you enable timeframes
• a navigator strip with a brush, if you enable navigator

The important bit is that both the buttons and the brush work with the same internal view. If the user clicks a range button, the chart updates its visible extent. If the user drags the brush, the chart updates the same visible extent. No duplicated state, no two widgets trying to outsmart each other, no “why is the UI lying to me” moment.

What problem it solves

The plain Line chart is enough when one view is enough. TimeSeries exists for the next step: when you want one chart instance to support “show me the last month”, “show me the last year”, and “show me everything” without wiring a second component tree around it.

This example uses:

• preset range buttons: 1M, 3M, 6M, 1Y, 2Y, ALL
• a built-in navigator strip under the chart
• a custom tooltip
• a few stats below the chart

Only the first two are specific to the module. The tooltip and stats are just ordinary page code around it.

Range buttons

Range buttons are controlled by the timeframes option.

const chart = new RareCharts.TimeSeries('#chart', {
  timeframes: true,
  defaultTimeframe: '1Y',
});

timeframes: true enables the built-in preset set: 1M, 3M, 6M, 1Y, 2Y, ALL. If you need a custom set, pass an array instead.

So:

• if you omit timeframes, there is no range bar
• if you pass timeframes: true, you get the built-in preset set
• if you pass ['1Y', 'ALL'], you get exactly those two buttons

Navigator

The gray strip under the chart is controlled by navigator.

const chart = new RareCharts.TimeSeries('#chart', {
  navigator: true,
});

Or with options:

const chart = new RareCharts.TimeSeries('#chart', {
  navigator: {
    height: 56,
    color: '#666666',
    area: 1,
    areaColor: '#cccccc',
  },
});

If enabled, the navigator always reflects the full dataset and highlights the current view. Dragging the brush updates the main chart. Clicking a range button also updates the brush. Same state, two controls, fewer bugs.

Programmatic control

The visible window is part of the chart API.

chart.setView([start, end]);
const current = chart.getView();

chart.onViewChange(extent => {
  console.log(extent);
});

This matters when the date range is driven by router state, saved user settings, query params, or another piece of UI that insists on being in charge.

Custom ranges

If the built-in shortcuts are not enough, you can define your own buttons.

const end = data[data.length - 1].date;

timeframes: [
  'ALL',
  {
    key: 'SINCE_2025',
    label: 'Since 2025',
    range: [new Date('2025-01-01'), end],
  },
  {
    key: 'SINCE_2026',
    label: 'Since 2026',
    range: [new Date('2026-01-01'), end],
  },
]

Rules:

• ALL means the full data extent
• built-in string shortcuts such as 1M, 6M, 1Y, YTD, ALL are resolved by the chart
• custom buttons use { key, label, range }
• range is [start, end]
• the final range is clamped to the real data extent, so overshooting the dataset is safe
• if multiple buttons resolve to the same final extent, the chart keeps the last explicitly selected button active

Annotations

Time Series supports event markers and reference levels via the annotations option — useful for marking halvings, earnings dates, or product releases on a long-running price feed, and for placing horizontal levels (break-even, cost basis, target) on top of the area. Annotations stay in sync with zoom and pan: out-of-range entries are skipped, range bands are clamped to the visible window. See the dedicated annotations page for the full API.

Time Series chart options

Common options shared by all chart types (title, subtitle, legend, legendPosition, source, theme) are documented on the Settings page.

Time Series instance methods