ChartPro Demo - Svelte Trading Chart

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.

🚀 Features

• ✅ Real-time data Live market data via WebSocket
• ✅ Timeframe aggregation Server-side aggregation 1m → 5m, 15m, 1H, 4H, 1D
• ✅ Price ticker Current price display with direction indicator
• ✅ Drawing tools Full set of tools (lines, shapes, Fibonacci, Elliott waves)
• ✅ Technical indicators More than 50 built-in technical analysis indicators
• ✅ Symbol search Dynamic symbol search and timeframe switching
• ✅ Themes Light/dark theme support with smooth transitions
• ✅ Internationalization Multiple language support (EN, CN, RU)
• ✅ Export Screenshot capture and data export
• ✅ Fullscreen mode Immersive trading interface
• ✅ Chart settings Full display customization
• ✅ Responsive design Works on desktop and mobile devices

🖼 Chart Preview

🛠 Quick Start

Requirements

• Node.js 16+
• npm or yarn
• PostgreSQL with TimescaleDB extension
• Redis

Installation

1. Clone the repository

   git clone https://github.com/wku/svelte-trading-chart.git
   cd svelte-trading-chart
   

2. Install dependencies

   npm install
   

3. Configure environment variables

   cp .env.example .env
   # Edit .env with your API and WebSocket settings
   

4. Start development server

   npm run dev
   

5. Open browser at http://localhost:5173

📁 Project Structure

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

🏗 Architecture

The demo demonstrates modular Svelte architecture with

• Component isolation Each function is encapsulated in its own component
• State management Centralized state through Svelte stores
• Clear separation Logic, markup and styles are properly separated
• Reusable components All components are designed for reuse
• Minimal dependencies Only necessary dependencies (KLineCharts 9.8.10)

💻 Usage Examples

Basic implementation

<script>
  import { ChartPro, DefaultDatafeed } from './lib/chart-pro';

  const datafeed = new DefaultDatafeed();
</script>

<ChartPro {datafeed} />

Advanced configuration

<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}
/>

Custom data provider

// 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 Components

ChartPro

Main chart component with full trading functionality

ChartToolbar

• Symbol search and selection
• Timeframe switching
• Theme switching
• Screenshot capture
• Fullscreen mode
• PriceTicker Current price display with direction indicator

PriceTicker

• Current price in real time
• Direction change indicator (▲▼)
• Absolute and percentage change
• Animation on price change

DrawingTools

• Trend lines and channels
• Geometric shapes
• Fibonacci tools
• Elliott wave patterns
• Text annotations

IndicatorPanel

• Moving averages (SMA, EMA, WMA)
• Oscillators (RSI, MACD, Stochastic)
• Volume indicators
• Bollinger Bands
• And many others...

SettingsModal

• Chart appearance customization
• Grid and crosshair settings
• Color scheme configuration
• Timezone selection

📊 Data Integration

The demo uses its own data server with

• WebSocket integration Real-time price updates
• Server-side aggregation Aggregation of 1-minute candles into various timeframes
• PostgreSQL + TimescaleDB Historical data storage
• Redis Pub/Sub for real-time updates
• REST API Historical data and symbol list retrieval

🔧 Development

Available scripts

# 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

Production build

npm run build

Built files will be in dist/ directory, ready for deployment.

🔌 API Integration

REST Endpoints

GET /api/candles?symbol=BTCUSDT&timeframe=1H&limit=1000
GET /api/symbols
GET /api/health

WebSocket

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
}

🎯 Use Cases

This demo is perfect for

• Learning Svelte See how to build complex financial applications
• Chart integration Example of KLineCharts integration with Svelte
• Trading applications Foundation for building trading platforms
• Financial dashboards Base for market analysis tools
• Educational projects Understanding financial chart implementation

🌐 Browser Support

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

📱 Mobile Support

Fully responsive design with touch-friendly controls for mobile trading.

🔗 Dependencies

{
  "klinecharts": "^9.8.10"
}

The project uses minimal dependencies for lightness and speed.

⚙️ Configuration

Environment Variables

# 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 proxy configuration

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': 'http://localhost:8022',
      '/ws': {
        target: 'ws://localhost:8022',
        ws: true
      }
    }
  }
}

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

• Documentation Check /src/lib/chart-pro/README.md for library documentation
• Issues Report bugs and feature requests through GitHub Issues
• Discussions Join community discussions

🙏 Acknowledgments

• KLineCharts - Excellent chart library
• Svelte - Amazing frontend framework
• TimescaleDB - Time-series database
• PostgreSQL - Reliable database system

Made with ❤️ using Svelte + KLineCharts + TimescaleDB

This demo demonstrates the power of modern web technologies for creating professional financial applications.