A TradingView-style charting Web Component built on lightweight-charts v5. Drop-in chart with toolbar, drawing tools, and flexible data provider architecture.
<oak-view> - single tag for full-featured chartsnpm 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 |
// 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).
<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 |
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:
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
MIT
FAQs
TradingView-style charting Web Component built on lightweight-charts v5
The npm package oakview receives a total of 84 weekly downloads. As such, oakview popularity was classified as not popular.
We found that oakview demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A mini Shai-Hulud campaign compromised Red Hat Cloud Services npm packages to steal developer and CI/CD secrets during installation.
Research
/Security News
The North Korean malware loader hides in a Packagist-listed package and its GitHub branch to fetch and execute remote code in a likely Contagious Interview-style lure.
Security News
The Rust project is moving toward formal rules on LLM use in contributions after months of internal debate over maintainer burden, code quality, and contributor experience.