Demo project of professional trading chart on Svelte with KLineCharts integration. The project shows how to integrate ChartPro library into Svelte application with connection to own data server.
Clone the repository
git clone https://github.com/wku/svelte-trading-chart.git
cd svelte-trading-chart
Install dependencies
npm install
Configure environment variables
cp .env.example .env
# Edit .env with your API and WebSocket settings
Start development server
npm run dev
Open browser at http://localhost:5173
src/
āāā lib/
ā āāā chart-pro/ # ChartPro library
ā āāā chart/ # Main chart component
ā āāā components/ # UI components
ā ā āāā chart-toolbar/ # Main toolbar with price ticker
ā ā āāā price-ticker/ # Price display component
ā ā āāā drawing-tools/ # Drawing tools
ā ā āāā indicators/ # Technical indicators
ā ā āāā modals/ # Settings and dialogs
ā āāā core/ # System core
ā ā āāā datafeed.js # Data provider interface
ā ā āāā extensions.js # Chart extensions
ā ā āāā types.js # Type definitions
ā āāā stores/ # Svelte store
ā ā āāā chartStore.js # Chart state management
ā ā āāā settingsStore.js# Settings management
ā āāā utils/ # Utilities
ā ā āāā constants.js # Application constants
ā ā āāā i18n.js # Internationalization
ā āāā index.js # Library entry point
āāā App.svelte # Main application component
āāā main.js # Application entry point
āāā app.css # Global styles
The demo demonstrates modular Svelte architecture with
<script>
import { ChartPro, DefaultDatafeed } from './lib/chart-pro';
const datafeed = new DefaultDatafeed();
</script>
<ChartPro {datafeed} />
<script>
import {
ChartPro,
DefaultDatafeed,
createSymbolInfo,
createPeriod,
SymbolType,
PeriodTimespan
} from './lib/chart-pro';
const datafeed = new DefaultDatafeed();
const symbol = createSymbolInfo('BTCUSDT', {
name: 'Bitcoin / Tether',
exchange: 'Linkora DEX',
type: SymbolType.CRYPTO
});
const period = createPeriod(15, PeriodTimespan.MINUTE, '15m');
</script>
<ChartPro
{datafeed}
{symbol}
{period}
theme="dark"
showToolbar={true}
showDrawingTools={true}
showIndicators={true}
/>
// Create your own datafeed implementation
class CustomDatafeed {
async getKLineData(symbol, period, from, to) {
// Get data from your API
const response = await fetch(`/api/candles?symbol=${symbol}&timeframe=${period}`);
return response.json();
}
subscribe(symbol, period, callback) {
// Implement real-time data subscription
const ws = new WebSocket(`ws://your-api.com/ws?symbol=${symbol}&timeframe=${period}`);
ws.onmessage = (event) => callback(JSON.parse(event.data));
}
}
Main chart component with full trading functionality
The demo uses its own data server with
# Development server
npm run dev
# Production build
npm run build
# Preview production build
npm run preview
# Type checking
npm run check
# Linting
npm run lint
npm run build
Built files will be in dist/
directory, ready for deployment.
GET /api/candles?symbol=BTCUSDT&timeframe=1H&limit=1000
GET /api/symbols
GET /api/health
ws://localhost:5173/ws?symbol=BTCUSDT&timeframe=1H
WebSocket messages
{
"symbol": "BTCUSDT",
"timestamp": 1703174400000,
"open": "42150.50",
"high": "42180.00",
"low": "42120.25",
"close": "42165.75",
"volume": "125.45",
"quote_volume": "5289456.75",
"trades": 1247
}
This demo is perfect for
Fully responsive design with touch-friendly controls for mobile trading.
{
"klinecharts": "^9.8.10"
}
The project uses minimal dependencies for lightness and speed.
# API configuration (via Vite proxy)
VITE_API_BASE_URL=/api
VITE_WS_BASE_URL=auto
# Direct connection (without proxy)
# VITE_API_BASE_URL=http://localhost:8022
# VITE_WS_BASE_URL=ws://localhost:8022
# Connection settings
VITE_CONNECTION_TIMEOUT=30000
VITE_MAX_RETRIES=5
VITE_DEFAULT_LIMIT=1000
// vite.config.js
export default {
server: {
proxy: {
'/api': 'http://localhost:8022',
'/ws': {
target: 'ws://localhost:8022',
ws: true
}
}
}
}
git checkout -b feature/amazing-feature
)git commit -m 'Add amazing feature'
)git push origin feature/amazing-feature
)This project is licensed under the MIT License - see the LICENSE file for details.
/src/lib/chart-pro/README.md
for library documentationMade with ā¤ļø using Svelte + KLineCharts + TimescaleDB
This demo demonstrates the power of modern web technologies for creating professional financial applications.