Moving average

Indicator settings

Moving average

Indicator settings

Charts.
View on GitHub

Market data,
drawn beautifully.

A fast, extensible financial charting engine that makes complex market interfaces feel direct. Bring your data, your components and your design system.

Explore the charts ↘Read the API →
✓No runtime dependencies✓React & Vue adapters✓Light & dark built in
ARDIN / EUR· XETRA
15M
Last price184.26+2.58 · 1.42%
FIG. 01 — LIVE CANVAS
EUR / USD1.0842+0.24%
BTC / USD118,420+2.81%
NASDAQ21,942+0.67%
GOLD3,341.8−0.18%
ARDIN184.26+1.42%
EUR / USD1.0842+0.24%
BTC / USD118,420+2.81%
NASDAQ21,942+0.67%
GOLD3,341.8−0.18%
ARDIN184.26+1.42%
The chart laboratory

One engine. Every market view.

Switch renderers without rebuilding your application. The data, viewport, events and extension model stay exactly where you left them.

ARDIN / EURLive market
184.26+1.42%
O 182.14H 185.02L 181.76V 2.84M
ARDIN
15 minute candlesVolumeMoving average● Rendering
Seven built-in renderers

Choose the visual grammar your data needs.

Candles for structure. Area for momentum. Bars for density. Every renderer shares one predictable contract and remains individually tree-shakeable.

01Candlestickcandle
02Areaarea
03OHLC barsbar
04Hollow candlehollow-candle
05Step linestepline
06HLC areahlc-area
07
Line renderer

Focused, familiar and ready for dense comparison views.

line
Synchronized by design

One gesture. Every relevant view.

Crosshairs move instantly while range, pane, indicator and drawing updates are coalesced per frame. Different chart sizes remain aligned by meaning, not pixels.

InputCoalesce / RAFPeers
Shared sync group
↔ Drag to move · Ctrl/Cmd + wheel to zoom
01Primary market
Sync
02Higher-timeframe context
Bring your own interface

The canvas is ours. The product experience is yours.

Use the imperative core directly, or let the official framework adapters own lifecycle and render chart-managed UI with real components.

TypeScript 7Vue 3React 16.8+
market-view.ts
import { FinancialChart } from "@ardinsys/financial-charts";

const chart = new FinancialChart(host, {
  stepSize: 60_000,
  type: "candle",
  theme: "dark",
});

chart.setData(data);
● TYPES SAFE0 WARNINGS
01

Component labels

Render indicator controls through Vue Teleport or React portals—with context, events and your design system intact.

02

Composable plugins

Add drawings, synchronization, annotations or domain-specific behavior without turning the chart into a monolith.

03

Portable state

Persist the viewport, panes, indicators and drawings, then restore them into another chart size or session.

Built for real products

Small surface. Serious capability.

017

built-in chart renderers

022

first-class framework adapters

030

required runtime dependencies

041

coherent extension model

Start with one div

Give your market interface a better foundation.

Install the core, pass it data, and keep every escape hatch for the product you are building next.

$pnpm add @ardinsys/financial-charts
Open the documentation →Explore the source