oakview

v0.2.0

Published

14 days ago

TradingView-style charting Web Component built on lightweight-charts v5

0High
0Medium
0Low

deepentropy16549846511654131546841132

charts lightweight-charts tradingview web-component trading finance candlestick ohlc technical-analysis

OakView

A TradingView-style charting Web Component built on lightweight-charts v5. Drop-in chart with toolbar, drawing tools, and flexible data provider architecture.

Features

Simple Integration: <oak-view> - single tag for full-featured charts
TradingView UI: Built-in toolbar, symbol search, interval selector, chart types
Drawing Tools: 21 professional drawing tools (trend lines, Fibonacci, shapes)
Data Agnostic: Bring your own data provider (REST, WebSocket, CSV)
Full API Access: Direct access to lightweight-charts v5 API
Framework Agnostic: Works with React, Vue, Angular, or vanilla JS
Multiple Layouts: Single, dual, triple, or quad pane layouts
Theme Support: Light and dark themes

Installation

npm install oakview

Quick Start

<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import 'oakview';
    import { OakViewDataProvider } from 'oakview';

    class MyProvider extends OakViewDataProvider {
      async initialize() { /* Connect to your data source */ }

      async fetchHistorical(symbol, interval) {
        const response = await fetch(`/api/bars/${symbol}/${interval}`);
        const data = await response.json();
        return data.map(bar => ({
          time: bar.timestamp,  // Unix seconds
          open: bar.open,
          high: bar.high,
          low: bar.low,
          close: bar.close,
          volume: bar.volume
        }));
      }
    }

    const chart = document.getElementById('chart');
    const provider = new MyProvider();
    await provider.initialize();
    chart.setDataProvider(provider);
  </script>
</head>
<body>
  <oak-view id="chart" symbol="AAPL" theme="dark"></oak-view>
</body>
</html>

Data Providers

OakView uses a flexible data provider system. Implement these methods:

| Method | Required | Description | |-----------------------------------------|----------|------------------------| | initialize(config) | Yes | Connect to data source | | fetchHistorical(symbol, interval) | Yes | Load OHLCV bars | | subscribe(symbol, interval, callback) | No | Real-time updates | | searchSymbols(query) | No | Symbol search | | getAvailableIntervals(symbol) | No | List timeframes |

Example Providers

CSV Provider - Load from static CSV files
WebSocket Provider - Real-time streaming
VoltTrading Provider - Production REST + WebSocket

Data Format

// OHLCV bar format
{
  time: 1700000000,    // Unix timestamp in SECONDS (not milliseconds)
  open: 150.00,
  high: 152.50,
  low: 149.00,
  close: 151.75,
  volume: 1000000      // Optional
}

Important: Time must be in Unix seconds. Data must be sorted ascending (oldest first).

API Reference

`<oak-view>` Attributes

| Attribute | Type | Default | Description | |-----------|--------------------------------------------------|------------|----------------| | layout | 'single' | 'dual' | 'triple' | 'quad' | 'single' | Pane layout | | symbol | string | 'SYMBOL' | Initial symbol | | theme | 'light' | 'dark' | 'dark' | Color theme |

Layout Methods

const chart = document.getElementById('chart');

// Set data provider
chart.setDataProvider(provider);

// Get chart pane (0-indexed)
const pane = chart.getChartAt(0);

// Get pane count
const count = chart.getChartCount();

// Change layout
chart.setLayout('dual');

Chart Pane Methods

const pane = chart.getChartAt(0);

// Set OHLCV data
pane.setData(bars);

// Update real-time
pane.updateRealtime(bar);

// Get lightweight-charts instance (full API access)
const lwChart = pane.getChart();

// Get main series
const series = pane.getSeries();

Events

chart.addEventListener('symbol-change', (e) => {
  console.log('Symbol:', e.detail.symbol);
});

chart.addEventListener('interval-change', (e) => {
  console.log('Interval:', e.detail.interval);
});

Direct API Access

Access the underlying lightweight-charts v5 API for advanced features:

const pane = chart.getChartAt(0);

// Get lightweight-charts instance
const lwChart = pane.getChart();
const series = pane.getSeries();

// Add price lines
series.createPriceLine({
  price: 150.00,
  color: '#FF9800',
  title: 'Entry'
});

// Add markers
series.setMarkers([{
  time: 1700000000,
  position: 'belowBar',
  color: '#26a69a',
  shape: 'arrowUp',
  text: 'BUY'
}]);

// Configure time scale
lwChart.timeScale().fitContent();

Drawing Tools

21 professional drawing tools organized by category:

Lines: Trend Line, Horizontal, Vertical, Ray, Arrow, Extended Line
Fibonacci: Retracement, Parallel Channel
Shapes: Rectangle, Circle, Triangle, Price Range
Annotations: Text, Callout, Brush, Highlighter, Path

const pane = chart.getChartAt(0);

// Activate tool
pane.setActiveTool('trend-line');

// Add drawing programmatically
pane.addDrawing('horizontal-line', [
  { time: 1700000000, price: 150 }
], { lineColor: '#ef5350' });

// Export/import drawings
const json = pane.exportDrawings();
pane.importDrawings(json);

Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

# Run tests
npm test

Browser Support

Chrome/Edge 79+
Firefox 63+
Safari 13.1+

Tech Stack

lightweight-charts v5 - Charting engine
Lit - Web Components
TypeScript - Type safety
Vite - Build tool

License

MIT