CodePen Live Examples

Interactive examples demonstrating GoCharting SDK features in real-time.

Live Embedded Examples

Advanced Trading Demo

Complete trading interface with order management, indicators, and drawing tools.

Features Demonstrated:

• Professional candlestick charts
• Technical indicators (RSI, MACD, Bollinger Bands)
• Drawing tools and annotations
• Order management interface
• Real-time data simulation
• Interactive trading controls

Open in CodePen  | Full Screen 

Basic Charting Demo

Simple chart implementation perfect for getting started.

Features Demonstrated:

• Basic chart setup
• Symbol switching
• Timeframe selection
• Theme switching (light/dark)
• Chart type selection
• Simple configuration

Open in CodePen  | Full Screen 

Internationalization & Theme Demo

Complete demonstration of internationalization (i18n) with 19+ languages and dynamic theme switching.

Features Demonstrated:

• 19+ Language Support: English, Chinese (Simplified & Traditional), Japanese, Korean, French, German, Spanish, Portuguese, Italian, Russian, Polish, Turkish, Thai, Vietnamese, Indonesian, Malay, Arabic, Hebrew
• Dynamic Theme Switching: Switch between light and dark themes using setTheme() method
• Real-time Language Switching: Change UI language without page reload
• Interactive Locale Switcher: Flag buttons for easy language selection
• Comprehensive Documentation: Locale codes and usage examples
• Instant Updates: See changes immediately in the chart UI

Open in CodePen  | Full Screen 

Demo WebSocket datafeed

Live chart using GoCharting’s hosted demo WebSocket (wss://gocharting.com/sdk/ws) for ticks and history. See also Demo WebSocket API.

Open in CodePen  | Full Screen 

Phase 0–1A API lab

Widget façade basics (activeChart, chart(i), chart counts, sync, subscribe). See also Chart API.

Open in CodePen  | Full Screen 

Phase 1B API lab

Shapes / studies façade APIs. See also Chart API.

Open in CodePen  | Full Screen 

Phase 1C API lab

Order / position / execution line overlays. See also Chart API.

Open in CodePen  | Full Screen 

Phase 1D API lab

Viewport, marks, and export APIs. See also Chart API.

Open in CodePen  | Full Screen 

Phase 1E API lab

Drawing tools, magnet, and lock APIs. See also Chart API.

Open in CodePen  | Full Screen 

Phase 2 layout lab

Multi-chart layouts, pane sizes, and sync. See also Chart API.

Open in CodePen  | Full Screen 

Phase 4 constructor lab

Construct-time options (features, overrides, favorites, adapters). See also Chart API and Configuration.

Open in CodePen  | Full Screen 

Phase 5 persistence lab

Save / load charts and server chart CRUD. See also Chart API.

Open in CodePen  | Full Screen 

touchMode compare lab (Desktop / Mobile)

TradingView-style Desktop / Mobile device toolbar. In Mobile mode, two phone frames sit side by side — touchMode: true vs touchMode: false.

Embedded live on Mobile Integration (iframe of examples/touchmode-compare-lab.html). Full page: /examples/touchmode-compare-lab.html.

Using These Examples

Try Immediately

Click the embedded examples above to interact with live charts directly in your browser.

Fork and Customize

• Click “Open in CodePen”
• Fork the pen to your account
• Modify the code to suit your needs
• Use as a starting point for your project

Copy Code

• View the HTML, CSS, and JavaScript tabs
• Copy relevant sections to your project
• Adapt the configuration for your use case

Learn by Example

• Examine the data provider implementation
• Study the chart configuration options
• See how events and interactions work