name: antv-f2
description: Use when building mobile-first visualization charts with AntV F2, creating JSX-based charts including line, bar, pie, area, scatter, radar, candlestick, gauge, treemap, or sunburst charts
AntV F2 Charting Library
Overview
AntV F2 is a mobile-first, high-performance charting library based on the Grammar of Graphics. It uses JSX syntax for declarative chart creation.
When to Use
- Building mobile visualization charts
- Creating interactive charts with touch gestures
- Implementing charts in React, Vue, or mini-programs
- Need lightweight canvas-based charting
Quick Reference
Core Components
| Component |
Purpose |
Example |
Canvas |
Root container |
<Canvas context={ctx}> |
Chart |
Data/scale/coord config |
<Chart data={data}> |
Line |
Line/curve charts |
<Line x="date" y="value" /> |
Interval |
Bar/pie/donut charts |
<Interval x="cat" y="val" /> |
Point |
Scatter/bubble charts |
<Point x="x" y="y" size="val" /> |
Area |
Area charts |
<Area x="date" y="value" /> |
Candlestick |
K-line charts |
<Candlestick x="date" y="ohlc" /> |
Axis |
Axis configuration |
<Axis field="date" /> |
Tooltip |
Hover/press tooltip |
<Tooltip showCrosshairs /> |
Legend |
Series legend |
<Legend position="top" /> |
ScrollBar |
Pan/zoom control |
<ScrollBar mode="x" range={[0.5,1]} /> |
Standalone Charts
| Component |
Purpose |
Gauge |
Progress/meter display |
Treemap |
Hierarchical rectangles |
Sunburst |
Hierarchical radial chart |
Chart Types Quick Mapping
| Chart Type |
Components |
Key Props |
| Line chart |
Line |
x, y, color |
| Column chart |
Interval |
x, y |
| Bar chart |
Interval |
coord={{ transposed: true }} |
| Pie chart |
Interval |
coord={{ type: 'polar', transposed: true }}, adjust="stack" |
| Donut chart |
Same as pie |
Add innerRadius: 0.6 to coord |
| Radar chart |
Line + Point |
coord="polar" |
| Area chart |
Area + Line |
x, y |
| Scatter plot |
Point |
x, y, color, size |
| Stacked bar |
Interval |
adjust="stack" |
| Grouped bar |
Interval |
adjust="dodge" |
Basic Structure
import { jsx, Canvas, Chart, Line, Axis, Tooltip } from '@antv/f2';
const data = [
{ date: '2023-01', value: 100 },
{ date: '2023-02', value: 150 },
];
const context = document.getElementById('container').getContext('2d');
const { props } = (
<Canvas context={context} pixelRatio={window.devicePixelRatio}>
<Chart data={data}>
<Axis field="date" />
<Axis field="value" />
<Line x="date" y="value" />
<Tooltip />
</Chart>
</Canvas>
);
const chart = new Canvas(props);
chart.render();
Common Patterns
Color Mapping
<Line color="#1890FF" /> // Fixed color
<Line color="category" /> // Field mapping
<Line color={["type", ["red", "blue"]]} /> // Custom range
<Line color={{ field: "val", callback: v => v > 50 ? "red" : "blue" }} />
Coordinate Systems
// Cartesian (default)
<Chart coord={{ type: 'rect', transposed: false }}>
// Polar (pie/radar)
<Chart coord={{ type: 'polar', transposed: true, innerRadius: 0.5 }}>
Data Adjustment
<Interval adjust="stack" /> // Stacked
<Interval adjust="dodge" /> // Grouped
Scale Configuration
<Chart
scale={{
value: { min: 0, max: 100, tickCount: 5, formatter: v => v + '%' },
date: { type: 'timeCat', mask: 'YYYY-MM-DD' },
}}
>
References
| Topic |
Reference |
| Full API Documentation |
@reference.md |
| Line charts |
@references/line.md |
| Area charts |
@references/area.md |
| Column charts |
@references/column.md |
| Bar charts (horizontal) |
@references/bar.md |
| Pie/Donut charts |
@references/pie.md |
| Scatter/Bubble charts |
@references/point.md |
| Radar charts |
@references/radar.md |
| Funnel charts |
@references/funnel.md |
| Candlestick (K-line) |
@references/candlestick.md |
| Treemap/Sunburst |
@references/relation.md |
| Axis/Guide/Legend |
@references/component.md |
Common Mistakes
| Mistake |
Fix |
| Blurry on mobile |
Set pixelRatio={window.devicePixelRatio} |
| Pie chart not circular |
Use coord={{ type: 'polar', transposed: true }} |
| Missing legend |
Add <Legend /> and use color prop on geometry |
| ScrollBar not working |
Both mode and range are required |
| Animation too fast/slow |
Configure animation={{ appear: { duration: 800 } }} |
| Axis labels overlapping |
Use labelAutoRotate={true} or labelAutoHide={true} |
By