1.2.8 • Published 4d ago

axon-charts

Licence

Apache-2.0

Version

1.2.8

Deps

Size

223 kB

Vulns

Weekly

282

Summary Dependency Versions

Axon Charts

A fast, lightweight candlestick chart library optimized for AI-driven applications and LLM integration.

Axon Charts

Overview

Axon Charts is a minimal-dependency candlestick charting library for modern web applications and AI agents. Built with a focus on:

Performance -- ~3ms first render, ~0.002ms tick updates, 25.4KB gzipped
AI-First -- Native LLM integration with structured context export
Lightweight -- Only 25.4KB gzipped (zero external dependencies)
Customizable -- 94 configuration options across 14 categories
Type-Safe -- Full TypeScript support with zero tsc errors

Features

Core Charting

6 series types: candlestick, bar, line, area, heiken-ashi, hollow
Volume histogram sub-pane with independent Y-axis (ScalePane architecture)
Real-time updates with updateLastBarFast()
Smooth pan and zoom (mouse + touch)
Multiple price scales (linear, logarithmic, percentage)
Crosshair with magnetic snapping, OHLC tooltip, full-date labels
Auto-scroll with scroll-lock detection
Market info header + auto-scaling watermark
Percentage mode with 0% reference line and smart formatting

Series Types

Line -- polyline connecting close prices, independent lineColor, latest price pulse animation
Area -- filled polyline with gradient, close markers, latest price marker
Bar (OHLC) -- open notch + high-low stem + close tick
Heiken-Ashi -- smoothed candle averages, single-compute architecture, separate HA price label
Hollow -- trend-colored wick/body with specific rules
Runtime type switching via series.type

LLM & AI Integration

Structured context export (getContext()) with configurable data exposure
AI agent discovery via window.__AXON_CHARTS__ global registry
Multi-chart support with per-chart IDs (data-axon-charts-id)
Stealth mode (context.discoverable: false) to hide from agents
Typed command execution (execute() with 9 command types)
Event callbacks (onCrosshairMove, onBarClick, onVisibleRangeChange, onDataUpdate)
Screenshot capture (toDataURL, toBlob)
State serialization (saveState, loadState)
Drawing API for persistent annotations

Developer Experience

3 component APIs (priceScale, timeScale, crosshair)
Comprehensive configuration system (94 options across 14 categories)
Runtime option updates with validation
Zero external dependencies

See live examples →

Installation

npm install axon-charts

Quick Start

HTML

<!DOCTYPE html>
<html>
<head>
  <script src="node_modules/axon-charts/dist/chart.js"></script>
  <style>
    #chart { width: 800px; height: 400px; }
  </style>
</head>
<body>
  <div id="chart"></div>
  <script>
    const chart = AxonCharts.createChart('#chart', {
      layout: { background: '#1a1a1a', textColor: '#ffffff' },
      grid: { vertLines: { color: '#2a2a2a' }, horzLines: { color: '#2a2a2a' } }
    });

    chart.setData([
      { time: 1704067200000, open: 100, high: 110, low: 90, close: 105, volume: 15000 },
      { time: 1704070800000, open: 105, high: 115, low: 100, close: 110, volume: 22000 },
    ]);
  </script>
</body>
</html>

JavaScript (ES Modules)

import { createChart } from 'axon-charts';

const chart = createChart('#chart', { layout: { background: '#1a1a1a' } });
chart.setData(data);

Try It Live

Live Examples: html/examples.html -- 11 chart configurations running live
Interactive Demo: html/demo.html -- explore all 94 settings in real-time

Documentation

Full documentation in the docs/ folder:

Document	Covers
Settings Reference	Every configuration option with types, defaults, and status
API Reference	Complete public API surface
LLM Integration	How LLMs read, write, and react to the chart
Streaming Guide	High-frequency tick data patterns

API Reference

Core Methods

// Create chart
const chart = AxonCharts.createChart('#container', options);

// Data operations
chart.setData(bars: Bar[]): void
chart.appendBar(bar: Bar): void
chart.updateLastBar(bar: Bar): void
chart.updateLastBarFast(bar: Bar): void   // High-frequency streaming

// Lifecycle
chart.resize(width?, height?): void
chart.destroy(): void

// Get context (for AI integration)
const context = chart.getContext(): ChartContext

// Screenshot
chart.toDataURL(): string
chart.toBlob(): Promise<Blob>

// State management
chart.saveState(): ChartState
chart.loadState(state): void

// LLM command execution
chart.execute(command): void

// Drawing API
chart.addDrawing(drawing): void
chart.removeDrawing(id): void
chart.clearDrawings(): void
chart.getDrawings(): Drawing[]

// Events
chart.onCrosshairMove = fn
chart.onBarClick = fn
chart.onVisibleRangeChange = fn
chart.onDataUpdate = fn

Component APIs

chart.priceScale().setMode('logarithmic' | 'percentage')
chart.priceScale().setMargins({ top: 0.2, bottom: 0.1 })
chart.priceScale().setReverse(true)

chart.timeScale().setVisibleRange(fromTimestamp, toTimestamp)
chart.timeScale().fitContent()
chart.timeScale().zoomIn(1.5)

chart.crosshairAPI().setMode('magnet')
chart.crosshairAPI().setShowLabels(true)

Configuration

chart.setOptions({
  layout: { background: '#1a1a1a', textColor: '#ffffff', fontSize: 14 },
  grid: { show: true, vertLines: { color: '#333333' }, horzLines: { color: '#333333' } },
  series: { type: 'line', lineColor: '#FF6B35', showMarkers: true },
  crosshair: { mode: 'magnet', showLabels: true, showTooltip: true },
  volume: { show: true, heightPercent: 0.2 },
  market: { baseAsset: 'BTC', quoteAsset: 'USDT', show: true },
  watermark: { text: 'AXON CHARTS', show: true, opacity: 0.05 }
});

Data Format

interface Bar {
  time: number;      // Timestamp in milliseconds
  open: number;      // Open price
  high: number;      // High price
  low: number;       // Low price
  close: number;     // Close price
  volume?: number;   // Volume (optional, required for sub-pane)
}

Performance

Measure	Result
First render (5000 bars, candle + volume)	~4ms
Live tick (tight loop)	~0.001ms
Live tick (async 50Hz)	~0.13ms
Full bar update (grid + axes)	~0.03ms
Crosshair draw	~0.02ms
Large dataset render (5000 bars)	~1.4ms
Series type render (500 bars)	~0.3ms
Bundle (gzipped)	25.4KB
Memory (5000 bars)	<0.1MB

License

Apache-2.0 -- See LICENSE file for details.

Note: The library features a small attribution badge that helps grow our community. If you're curious about our branding approach or how to respectfully use Axon Charts, please check out the NOTICE file.

Keywords

candlestick chart financial trading canvas llm ai axon fintech charting candlestick-chart financial-chart trading-chart realtime

axon-charts

Axon Charts

Overview

Features

Core Charting

Series Types

LLM & AI Integration

Developer Experience

Installation

Quick Start

HTML

JavaScript (ES Modules)

Try It Live

Documentation

API Reference

Core Methods

Component APIs

Configuration

Data Format

Performance

Browser Support

License

Links

Keywords