# AntV F2 — Mobile-First Interactive Chart Library

> A high-performance, mobile-optimized charting library by Ant Group built on the Grammar of Graphics for rendering interactive visualizations on phones and tablets.

## Install

Save as a script file and run:

# AntV F2 — Mobile-First Interactive Chart Library

## Quick Use
```bash
npm install @antv/f2
```
```javascript
import F2 from "@antv/f2";
const chart = new F2.Chart({ id: "myChart", pixelRatio: window.devicePixelRatio });
chart.source(data);
chart.interval().position("genre*sold").color("genre");
chart.render();
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-06c41118
Author: Script Depot