F2 provides a comprehensive interaction system for adding user interactivity to charts, including zoom, pan, brush selection, magnification, and scrolling. These interactions are optimized for mobile touch interfaces while also supporting desktop mouse interactions.
Zoom and pan interactions for exploring data at different scales.
/**
* Zoom component for zoom and pan interactions
*/
class Zoom extends Component<ZoomProps> {
constructor(props: ZoomProps);
}
/**
* Zoom interaction configuration
*/
interface ZoomProps {
/** Zoom mode - which axes to zoom */
mode?: 'x' | 'y' | 'xy';
/** Enable pan gesture */
pan?: boolean;
/** Enable pinch zoom gesture */
pinch?: boolean;
/** Zoom sensitivity */
sensitivity?: number;
/** Minimum zoom scale */
minZoom?: number;
/** Maximum zoom scale */
maxZoom?: number;
/** Auto fit after zoom */
autoFit?: boolean;
/** Zoom start callback */
onStart?: (ev: ZoomEvent) => void;
/** Zoom change callback */
onChange?: (ev: ZoomEvent) => void;
/** Zoom end callback */
onEnd?: (ev: ZoomEvent) => void;
}
/**
* Zoom event information
*/
interface ZoomEvent {
/** Current zoom scale */
zoom: number;
/** Pan offset */
pan: { x: number; y: number };
/** Zoom center point */
center: { x: number; y: number };
/** Original event */
originalEvent: Event;
}Usage Examples:
import { Zoom } from "@antv/f2";
// Basic zoom interaction
<Chart data={data}>
<Line x="date" y="value" />
<Zoom mode="x" />
</Chart>
// Zoom with pan
<Chart data={data}>
<Area x="time" y="temperature" />
<Zoom
mode="xy"
pan={true}
pinch={true}
sensitivity={0.5}
minZoom={0.1}
maxZoom={10}
/>
</Chart>
// Zoom with callbacks
<Chart data={data}>
<Interval x="category" y="value" />
<Zoom
mode="y"
onStart={(ev) => console.log('Zoom started', ev)}
onChange={(ev) => console.log('Zoom changed', ev.zoom)}
onEnd={(ev) => console.log('Zoom ended', ev)}
/>
</Chart>Scrollbar navigation for large datasets.
/**
* ScrollBar component for dataset navigation
*/
class ScrollBar extends Component<ScrollBarProps> {
constructor(props: ScrollBarProps);
}
/**
* ScrollBar configuration properties
*/
interface ScrollBarProps {
/** Scroll mode - which axis to scroll */
mode?: 'x' | 'y';
/** Current visible range [start, end] as percentages (0-1) */
range?: [number, number];
/** ScrollBar height (for horizontal) or width (for vertical) */
size?: number;
/** ScrollBar position offset */
offset?: number;
/** ScrollBar styling */
style?: {
/** Track background color */
trackColor?: string;
/** Thumb color */
thumbColor?: string;
/** Track border radius */
trackRadius?: number;
/** Thumb border radius */
thumbRadius?: number;
};
/** Range change callback */
onChange?: (range: [number, number]) => void;
}
/**
* HOC for creating custom scrollbar components
*/
function withScrollBar<T>(View: T): T;
/**
* Base scrollbar view component
*/
class ScrollBarView extends Component {}Usage Examples:
import { ScrollBar } from "@antv/f2";
// Horizontal scrollbar
<Chart data={largeDataset}>
<Line x="date" y="value" />
<ScrollBar
mode="x"
range={[0, 0.3]}
size={16}
style={{
trackColor: '#f0f0f0',
thumbColor: '#1890ff'
}}
onChange={(range) => {
console.log('Visible range:', range);
// Update chart data or scale
}}
/>
</Chart>
// Vertical scrollbar
<Chart data={categoricalData}>
<Interval x="category" y="value" />
<ScrollBar
mode="y"
range={[0.7, 1.0]}
offset={10}
/>
</Chart>Magnification lens for detailed inspection.
/**
* Magnifier component for detailed data inspection
*/
class Magnifier extends Component<MagnifierProps> {
constructor(props: MagnifierProps);
}
/**
* Magnifier configuration properties
*/
interface MagnifierProps {
/** Magnifier lens size in pixels */
size?: number;
/** Magnification scale factor */
scale?: number;
/** Whether magnifier follows cursor */
follow?: boolean;
/** Magnifier lens shape */
shape?: 'circle' | 'square';
/** Magnifier styling */
style?: {
/** Lens border color */
borderColor?: string;
/** Lens border width */
borderWidth?: number;
/** Lens background color */
backgroundColor?: string;
/** Lens opacity */
opacity?: number;
};
/** Show callback */
onShow?: (ev: MagnifierEvent) => void;
/** Hide callback */
onHide?: (ev: MagnifierEvent) => void;
/** Move callback */
onMove?: (ev: MagnifierEvent) => void;
}
/**
* Magnifier event information
*/
interface MagnifierEvent {
/** Mouse/touch position */
x: number;
y: number;
/** Magnified data points */
data: any[];
/** Original event */
originalEvent: Event;
}Usage Examples:
import { Magnifier } from "@antv/f2";
// Basic magnifier
<Chart data={denseData}>
<Point x="x" y="y" size={2} />
<Magnifier
size={100}
scale={3}
shape="circle"
/>
</Chart>
// Custom magnifier with callbacks
<Chart data={detailData}>
<Line x="time" y="signal" />
<Magnifier
size={80}
scale={5}
follow={true}
style={{
borderColor: '#1890ff',
borderWidth: 2,
opacity: 0.9
}}
onShow={(ev) => console.log('Magnifier shown at', ev.x, ev.y)}
onMove={(ev) => console.log('Inspecting', ev.data.length, 'points')}
/>
</Chart>Interactive pictorial elements with custom behaviors.
/**
* Pictorial component with interaction capabilities
*/
class Pictorial extends Component<PictorialProps> {
constructor(props: PictorialProps);
}
/**
* Pictorial interaction properties
*/
interface PictorialProps {
/** Data for pictorial elements */
data: any[];
/** Symbol definition */
symbol?: string | ((data: any) => string);
/** Symbol size */
symbolSize?: number | ((data: any) => number);
/** Symbol positioning */
symbolPosition?: 'start' | 'middle' | 'end';
/** Symbol repeat mode */
symbolRepeat?: boolean;
/** Symbol margin */
symbolMargin?: number;
/** Click interaction callback */
onClick?: (data: any, event: Event) => void;
/** Hover interaction callback */
onHover?: (data: any, event: Event) => void;
}Usage Examples:
import { Pictorial } from "@antv/f2";
// Interactive pictorial chart
const iconData = [
{ category: 'Mobile', value: 120, icon: '📱' },
{ category: 'Desktop', value: 80, icon: '💻' },
{ category: 'Tablet', value: 45, icon: '📟' }
];
<Pictorial
data={iconData}
x="category"
y="value"
symbol={(d) => d.icon}
symbolSize={24}
symbolRepeat={true}
onClick={(data, event) => {
console.log('Clicked:', data.category);
// Handle click interaction
}}
onHover={(data, event) => {
console.log('Hovering:', data.category);
// Handle hover interaction
}}
/>F2 interactions are optimized for mobile touch interfaces.
/**
* Touch event information
*/
interface TouchEvent {
/** Touch identifier */
identifier: number;
/** Touch position */
clientX: number;
clientY: number;
/** Touch force (if supported) */
force?: number;
}
/**
* Gesture event information
*/
interface GestureEvent {
/** Gesture type */
type: 'tap' | 'pan' | 'pinch' | 'swipe';
/** Gesture center point */
center: { x: number; y: number };
/** Gesture delta */
delta: { x: number; y: number };
/** Gesture velocity */
velocity: { x: number; y: number };
/** Gesture scale (for pinch) */
scale?: number;
/** Gesture rotation (for rotate) */
rotation?: number;
}Utility functions for interaction handling.
/**
* Check if point is within bounding box
* @param bbox Bounding box coordinates
* @param point Point coordinates
* @returns Whether point is within bbox
*/
function isInBBox(bbox: BBox, point: Point): boolean;
/**
* Bounding box definition
*/
interface BBox {
left: number;
top: number;
width: number;
height: number;
}
/**
* Point coordinates
*/
interface Point {
x: number;
y: number;
}Usage Examples:
import { isInBBox } from "@antv/f2";
// Hit testing
const chartBounds = { left: 50, top: 50, width: 300, height: 200 };
const clickPoint = { x: 150, y: 120 };
if (isInBBox(chartBounds, clickPoint)) {
console.log('Click is within chart area');
// Handle chart interaction
}Common event handling patterns for chart interactions.
/**
* Chart interaction event types
*/
type InteractionEventType =
| 'click'
| 'dblclick'
| 'mousedown'
| 'mouseup'
| 'mousemove'
| 'mouseover'
| 'mouseout'
| 'touchstart'
| 'touchmove'
| 'touchend'
| 'gesturestart'
| 'gesturechange'
| 'gestureend';
/**
* Interaction event handler
*/
type InteractionEventHandler = (event: any) => void;Usage Examples:
// Multi-touch interaction handling
<Chart data={data}>
<Point x="x" y="y" />
<Zoom
mode="xy"
pinch={true}
onStart={(ev) => {
// Disable other interactions during zoom
document.body.style.overflow = 'hidden';
}}
onEnd={(ev) => {
// Re-enable scrolling
document.body.style.overflow = 'auto';
}}
/>
</Chart>
// Combined interactions
<Chart data={timeSeriesData}>
<Line x="date" y="value" />
<Tooltip snap={true} />
<Zoom mode="x" pan={true} />
<ScrollBar
mode="x"
onChange={(range) => {
// Update visible data range
const [start, end] = range;
const visibleData = data.slice(
Math.floor(start * data.length),
Math.ceil(end * data.length)
);
// Update chart with filtered data
}}
/>
</Chart>