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
jsx
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
jsx
<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
jsx
// Cartesian (default)
<Chart coord={{ type: 'rect', transposed: false }}>
// Polar (pie/radar)
<Chart coord={{ type: 'polar', transposed: true, innerRadius: 0.5 }}>
Data Adjustment
jsx
<Interval adjust="stack" /> // Stacked <Interval adjust="dodge" /> // Grouped
Scale Configuration
jsx
<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} |