Skip to content
EliteChart

Mobile layout

Touch gestures, mobile-first sizing, and the FAB pattern — how EliteChart adapts below 500px.

EliteChart is touch-first. Pinch-zoom, pan, long-press context menu, and momentum scrolling all work below 500 px without any opt-in.

Quick example

code
'use client';
import { EliteChart } from '@elitechart/elitechart';
import '@elitechart/elitechart/styles.css';

export default function MobilePage() {
  return (
    <div style={{ width: '100vw', height: '100vh', overflow: 'hidden' }}>
      <EliteChart symbol="BTCUSD" timeframe="1h" />
    </div>
  );
}

How it works

Below --mobile-breakpoint (default 500 px), EliteChart switches the right sidebar from a docked rail to a bottom-sheet pattern, collapses the bottom drawer to a tab strip, and swaps the right-click context menu for long-press.

Touch gestures map to canvas actions exactly as on desktop:

GestureAction
One-finger dragPan
PinchZoom both axes
Two-finger drag (vertical)Pan price axis
Long-pressContext menu

Variations

Force the desktop layout on a tablet

code
@media (min-width: 600px) {
  [data-elitechart-mobile="true"] { display: none; }
  [data-elitechart-desktop] { display: block; }
}

Hide the toolbar on mobile

code
@media (max-width: 500px) {
  header[role="banner"] [data-cf-region="indicators"] { display: none; }
}

API

TokenDefaultRole
--mobile-breakpoint500pxlayout-mode threshold
--touch-tap-radius24pxhit-area enlargement on touch