AntV F2 — Mobile-First Interactive Chart Library

Introduction

F2 is a mobile-first charting library developed by Ant Group as part of the AntV data visualization family. It is optimized for rendering fast, interactive charts on mobile devices with touch-friendly gestures, small bundle size, and Canvas-based rendering tuned for constrained environments.

What AntV F2 Does

• Renders bar, line, area, pie, radar, and scatter charts optimized for mobile screens
• Supports touch gestures including pinch-to-zoom, pan, and tap selection
• Implements the Grammar of Graphics model for composable and declarative chart definitions
• Provides animation and transition effects tuned for 60fps on mobile hardware
• Works in browser, React Native, and mini-program environments via adapter layers

Architecture Overview

F2 follows the Grammar of Graphics paradigm where charts are composed from data mappings, geometric marks, scales, axes, and coordinate systems. The rendering pipeline uses a lightweight Canvas abstraction optimized for mobile GPUs. A gesture system translates touch events into chart interactions like tooltips and region selections. The architecture avoids DOM dependencies so it runs in Canvas-only environments like WeChat mini-programs and React Native.

Self-Hosting & Configuration

• Install via npm and import the Chart class
• Create a chart bound to a canvas element with device pixel ratio configuration
• Load data with chart.source() and define visual encodings with geometry methods
• Customize scales, axes, legends, and tooltips through the chart API
• Use the @antv/f2-react adapter for React components or the mini-program adapter for WeChat

Key Features

• Designed from the ground up for mobile with a sub-100KB gzipped bundle
• Touch-optimized interactions including gestures, tooltips, and guided selections
• Grammar of Graphics API for flexible, composable chart construction
• Smooth 60fps animations even on lower-end mobile devices
• Cross-runtime support: browser, React Native, Alipay, and WeChat mini-programs

Comparison with Similar Tools

• ECharts — full-featured desktop and mobile charting with a larger bundle; F2 is optimized specifically for mobile performance and bundle size
• Chart.js — popular canvas charting library; F2 provides richer mobile gesture support and the Grammar of Graphics API
• G2 (AntV) — F2's desktop counterpart with a full Grammar of Graphics implementation; F2 trades some flexibility for mobile performance
• Recharts — React-specific charting built on D3 and SVG; F2 uses Canvas rendering for better mobile performance

FAQ

Q: How small is the F2 bundle? A: The core library is under 100KB gzipped, making it suitable for bandwidth-constrained mobile environments.

Q: Can I use F2 in WeChat mini-programs? A: Yes. F2 provides an official mini-program adapter that renders to the mini-program Canvas component.

Q: Does F2 support server-side rendering? A: F2 relies on Canvas rendering, so it requires a canvas-capable environment. For SSR scenarios, use node-canvas or render on the client.

Q: Is F2 part of the AntV ecosystem? A: Yes. F2 is the mobile member of the AntV family alongside G2 (charts), G6 (graphs), S2 (tables), and L7 (maps).

Sources

• https://github.com/antvis/F2
• https://f2.antv.antgroup.com/