Sixtyfold Charts
Canvas2D charts for large line-series and OHLCV datasets.
Sixtyfold Charts is a TypeScript and Canvas2D charting library for datasets that are too large for ordinary DOM or SVG rendering. Browser charts use a Web Worker when supported so preparation and rendering stay off the UI thread; the same renderer falls back to the main thread when needed.
Use @sixtyfold/line for multi-series lines, steps, ranges, points, bars, and stacked areas. Use @sixtyfold/stock for OHLCV candles, volume, indicators, volume profiles, price lines, and event markers.
The browser chart runtime has no third-party dependencies: Core, Line, and Stock depend only on Sixtyfold packages. Framework adapters reuse the framework already present in the host application, while the optional MCP developer tool runs separately and never enters chart bundles.
Start here
- Install only the packages you need.
- Build a line chart or stock chart.
- Choose vanilla TypeScript or a framework adapter.
- Read the typed-array ownership contract before loading production data.
Every browser integration has the same lifecycle:
const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(data);
// When the view is permanently removed:
chart.destroy();Level of detail (LOD)
LOD means level of detail. It is the chart's automatic screen-sized representation of a larger dataset: line charts retain important extrema and gaps, while stock charts combine candles into valid OHLCV periods. Finer detail appears as you zoom.
The same principle is familiar from 3D games: distant objects use simpler models because the screen cannot show every polygon, then gain detail as the camera moves closer. In a chart, the visible range replaces camera distance—an overview draws a bounded summary instead of millions of indistinguishable samples, then restores finer data as you zoom in. The defaults suit most applications.
Go further
- Use the performance guide and live level-of-detail calibration before changing presentation settings.
- Choose between worker and main-thread rendering, or produce static output with server-side rendering.
- Connect the local Model Context Protocol (MCP) server when a coding agent needs the exact installed API.
- Open the Line API or Stock API when you need an exact option, method, or data type.
- Start with troubleshooting when a chart is blank, slow, incorrectly sized, or retaining resources.
Project lineage
Sixtyfold Charts grew from lessons learned while building 99ff00/react-charty, its predecessor. Sixtyfold is a new architecture and product rather than a renamed release.
Research foundations
Sixtyfold's renderer and LOD system are original TypeScript implementations. The following publications informed the design; the links acknowledge that lineage, not code ancestry, affiliation, or endorsement.
Direct influences
- M4: A Visualization-Oriented Time Series Data Aggregation — Uwe Jugel, Zbigniew Jerzak, Gregor Hackenbroich, and Volker Markl, PVLDB (2014). Informed the ordered first/minimum/maximum/last summary used within display-scale intervals.
- OM3: An Ordered Multi-level Min-Max Representation for Interactive Progressive Visualization of Time Series — Yunhai Wang et al., PACM (2023). Informed the use of a hierarchy to answer arbitrary visible-range queries without rescanning every visible source point. Sixtyfold does not adopt OM3's database representation or progressive protocol.
- Data Point Selection for Line Chart Visualization: Methodological Assessment and Evidence-Based Guidelines — Jonas Van Der Donckt, Jeroen Van Der Donckt, Michael Rademaker, and Sofie Van Hoecke (2023). Its evaluation of visual stability during panning, zooming, and streaming informed Sixtyfold's anchored, quantized presentation grid.
Evaluated alternative
- Downsampling Time Series for Visual Representation — Sveinn Steinarsson, University of Iceland (2013). Introduced the Largest-Triangle-Three-Buckets family evaluated during design. Sixtyfold does not implement LTTB; its production line LOD uses extrema-preserving hierarchical interval summaries.
These citations describe research influences only. Sixtyfold does not reproduce paper text, figures, or reference implementations. Publication and code licences remain separate from the Sixtyfold licence.