A TradingView-style charting Web Component built on lightweight-charts v5. Drop-in chart with toolbar, drawing tools, and flexible data provider architecture.
- 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
npm install oakview<!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>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 |
- CSV Provider - Load from static CSV files
- WebSocket Provider - Real-time streaming
- VoltTrading Provider - Production REST + WebSocket
// 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).
| Attribute | Type | Default | Description |
|---|---|---|---|
layout |
'single' | 'dual' | 'triple' | 'quad' |
'single' |
Pane layout |
symbol |
string |
'SYMBOL' |
Initial symbol |
theme |
'light' | 'dark' |
'dark' |
Color theme |
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');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();chart.addEventListener('symbol-change', (e) => {
console.log('Symbol:', e.detail.symbol);
});
chart.addEventListener('interval-change', (e) => {
console.log('Interval:', e.detail.interval);
});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();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);# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run build
# Run tests
npm test- Chrome/Edge 79+
- Firefox 63+
- Safari 13.1+
- lightweight-charts v5 - Charting engine
- Lit - Web Components
- TypeScript - Type safety
- Vite - Build tool
MIT