https://github.com/deepentropy/oakview
A lightweight, embeddable Web Component wrapper for TradingView's Lightweight Charts.
https://github.com/deepentropy/oakview
lightweight-charts tradingview
Last synced: 5 months ago
JSON representation
A lightweight, embeddable Web Component wrapper for TradingView's Lightweight Charts.
- Host: GitHub
- URL: https://github.com/deepentropy/oakview
- Owner: deepentropy
- License: mit
- Created: 2025-11-06T19:35:10.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2026-01-21T21:11:04.000Z (5 months ago)
- Last Synced: 2026-01-22T10:00:46.830Z (5 months ago)
- Topics: lightweight-charts, tradingview
- Language: TypeScript
- Homepage:
- Size: 19.9 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# OakView
[](https://www.npmjs.com/package/oakview)
[](https://opensource.org/licenses/MIT)
A TradingView-style charting Web Component built
on [lightweight-charts v5](https://github.com/tradingview/lightweight-charts). Drop-in chart with toolbar, drawing
tools, and flexible data provider architecture.
## Features
- **Simple Integration**: `` - 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
```bash
npm install oakview
```
## Quick Start
```html
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);
```
## 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](./examples/csv/)** - Load from static CSV files
- **[WebSocket Provider](./examples/websocket/)** - Real-time streaming
- **[VoltTrading Provider](./examples/volttrading/)** - Production REST + WebSocket
### Data Format
```javascript
// 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
### `` 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
```javascript
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
```javascript
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
```javascript
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:
```javascript
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
```javascript
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
```bash
# 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](https://github.com/tradingview/lightweight-charts) - Charting engine
- [Lit](https://lit.dev/) - Web Components
- [TypeScript](https://www.typescriptlang.org/) - Type safety
- [Vite](https://vitejs.dev/) - Build tool
## License
MIT