F2 is a mobile-first JavaScript charting library from Ant Group's AntV family, built for developers who need elegant, interactive data visualisation across H5, mini-program, Node.js, React Native, and Weex from a single codebase.

What it is

F2 is an open-source charting library focused on mobile rendering, distributed through AntV, the visualisation ecosystem maintained by Ant Group. It is written in JavaScript, licensed under MIT, and published to npm as @antv/f2. Its design rests on the Grammar of Graphics theory proposed by Leland Wilkinson, which the project credits as the foundation for its compositional approach to building charts.

The concrete problem F2 solves is the mismatch between desktop-oriented chart libraries and the constraints of mobile devices. Traditional libraries wrap each chart type in its own dedicated component, which bloats bundles and limits flexibility on small screens. F2 abandons that per-chart encapsulation in favour of data-driven composition, where charts are assembled from grammar primitives. This keeps the bundle small — 44k gzipped without interactions, 56k with all interaction code — while still covering more than 50 chart types, and it lets the same code render across H5, mini-program, Node.js, React Native, and Weex environments.

Key capabilities

• Renders over 50 chart types by composing Grammar of Graphics primitives instead of per-chart wrappers.
• Keeps bundle size to 44k gzipped without interactions and 56k with all interactions included.
• Supports modular design and dynamic loading to further reduce shipped size.
• Renders in multiple environments from one codebase: H5, Node.js, Alipay mini-program, WeChat mini-program via wx-f2, React Native via f2-demo, and Weex.
• Accepts a JSON array of standard JSON objects as its data source, with no schema beyond plain objects.
• Exposes extensible Shape, animation, and interaction mechanisms for custom chart behaviour and styling.
• Uses HTML5 canvas for rendering, as reflected in the project's html5-canvas topic.

Who uses it and how

• Mobile H5 teams that need interactive charts optimised for fragmented user attention on small screens.
• Mini-program developers targeting Alipay or WeChat, where F2 renders through the same grammar API.
• Cross-platform teams using React Native or Weex that want one chart codebase for native and web targets.
• Server-side or Node.js pipelines rendering charts outside a browser context.
• Performance-conscious teams that use modular dynamic loading to ship only the chart and interaction code in use.

Getting started

Install with npm install @antv/f2, then build a chart from a JSON array via a canvas context and the Canvas component, as shown in the quick-start example.

How it compares

No comparable projects or paid alternatives are named in the registry facts for this listing, so F2 stands alone in this registry without a stated replacement set.

When to use it — and when not to

F2 suits mobile and multi-environment charting where bundle size and interaction quality matter more than exhaustive desktop-dashboard features. It carries 303 open issues, and its primary documentation is in Chinese with a separate English README, which raises friction for teams that do not read Chinese. Teams building large desktop-first analytics dashboards, or those needing heavy server-side data aggregation, should weigh whether a fuller-featured charting stack fits better.

$ npm install @antv/f2

<canvas id="mountNode"></canvas>

// F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

// 获取 canvas context
const context = document.getElementById('mountNode').getContext('2d');
const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
    <Chart data={data}>
      <Axis field="genre" />
      <Axis field="sold" />
      <Interval x="genre" y="sold" color="genre" />
      <Tooltip />
    </Chart>
  </Canvas>
);

const canvas = new Canvas(props);
canvas.render();

$ npm install

# 先初始化 monorepo
$ npm run bootstrap

# 再跑测试用例
$ npm run test

# 监听文件变化构建，并打开 demo 页面
$ npm run dev

# 打开某一个具体的测试用例
$ npm run test-watch -- 'TestFileName'