The Time Series chart is built for price-like data: long sequences, frequent updates, and the kind of “read the move” workflow where you do not want to zoom with your brain. It combines a main chart for detailed inspection with a compact overview chart that acts as a timeline navigator.
The main job of Time Series chart is to make long histories readable and to make navigation trivial: you should be able to focus on the last month, the last year, or “everything” without re-rendering the page or rebuilding the chart.
The chart also supports business-style formatting and presentation: clear positive/negative color logic, compact numeric formats for volume, and tooltips that can show more than one number without turning into a tooltip novel.
Anatomy of the example
The demo is composed of three connected parts.
The first is a main Time Series chart. It renders the selected time window and provides precise inspection via a tooltip that follows the cursor.
The second is an Overview chart under the main chart. It renders the full history in a compressed form and exposes a brush selection. Dragging or resizing the brush changes the main chart’s view. Likewise, changes in the main chart (for example, when you pick a range) update the brush, so both stay synchronized.
The third is a range button bar (1M / 3M / 6M / 1Y / 2Y / ALL) demonstrates that the chart view is an explicit concept (setView) and can be controlled programmatically, which matters when your view range is driven by application state or user preferences.
Tooltip as a template, not a default
This example uses a custom tooltipFormat that returns HTML. It shows date, price, and daily change in both absolute and percent terms, and it also prints volume in a compact format. The important point is that tooltips are treated as a rendering layer you control, so you can match your product language and data semantics.
Programmatic control of the view
The main chart exposes setView ([start, end]), and the overview exposes a brush that can be driven via setBrush ([start, end]). In this demo, the initial state is “last year”, but the same mechanism supports deep-linking, saved presets, and state persistence across page reloads.
This is the kind of thing that separates “a chart” from “a chart component”.
Time Series is an example of how RareCharts scales from simple chart primitives to composed, business-ready chart modules. You still work with the same core principles (explicit options, explicit data, consistent styling), but you get a higher-level component that solves a real workflow: navigating history, inspecting values, and presenting context around the chart.