Tickline documentation
Tickline is a live trading chart for websites and web apps. You add one <trade-chart> element (or create a Chart in code), give it candles, and stream prices to it. It draws candles, indicators, drawing tools, your users' positions and price alerts, and handles zoom, pan, touch, full screen and images.
Start here
- Getting started: install, the first chart, live prices, in five minutes.
- Feeding data: candles, live trades, whole candles, loading history page by page, time zones, switching symbols.
Guides
- Configuration: every setting and its default.
- Overlays, shapes and drawings: positions, alerts, shapes from code, custom layers, the live-price marker, and the drawing tools.
- Indicators: the built-in indicators, styling them, and writing your own.
- Zoom and navigation: wheel, pinch, axis dragging, range buttons, and zooming from code.
- Animation: speed, durations and easing for every animation.
- Styling and themes: colours, fonts, CSS variables and the built-in buttons.
- Frameworks: React, Next.js, Vue, Nuxt, Angular, Svelte, Blazor and plain HTML.
- Full screen and images: full screen in portrait and landscape, and downloading the chart.
- Several charts and saved charts: keeping charts in sync, saving and restoring a user's chart.
- Performance: many charts, fast feeds, large histories.
- Accessibility: keyboard, screen readers, reduced motion.
- Troubleshooting: common problems and fixes.
- AI assistants: the MCP server and the Claude Code skill.
Reference
- API reference: every method, property, event and type.
- Changelog
- Publishing: for maintainers releasing new versions.
Browser support
Current versions of Chrome, Edge, Firefox and Safari on desktop, Android and iOS. It needs Canvas 2D and custom elements, which every browser from the last few years has. Without ResizeObserver it follows the window size instead, and where the browser can't show an element full screen (iPhone Safari) it covers the page.