AntV F2: A Mobile-First Charting Library Built on the Grammar of Graphics

The problem F2 solves: charts that assume a desktop are the wrong shape for a phone

Most JavaScript charting libraries were designed around a browser window with room for a legend, a title block and a tooltip that can float anywhere. On a phone that space does not exist. F2 takes the opposite starting point. The README describes it as a visualization solution focused on mobile, usable out of the box, and it lists HTML5 canvas as the rendering target, with compatibility for Node.js, Alipay mini programs, WeChat mini programs (through a separate wx-f2 repository), React Native and Weex.

The intended reader is a front-end engineer building a mobile page or a mini program who needs a chart inside a small viewport and does not want to pull in a desktop-oriented rendering stack. The README also states the library supports 50+ chart types and that the non-interactive build is 44k gzipped while the build with all interactions is 56k gzipped. Those numbers come from the README, not from an independent measurement, and they are the kind of claim that shifts between versions, so treat them as a starting point rather than a guarantee.

How F2 works: a grammar of graphics over canvas, driven by declarative components

F2 is built on the grammar of graphics, and the README credits Leland Wilkinson's book of that name as the theoretical basis. In practice this means you do not pick a named chart type from a menu. You declare marks and encodings, and the library composes the chart from them. The README frames this as a deliberate break from libraries that wrap each chart type individually: instead of a special-case wrapper per chart, the combination of grammar primitives is what produces the 50+ chart types.

The data contract is deliberately plain. The README states that the only requirement on the data source format is a JSON array, where each element is a standard JSON object. There is no schema object and no column-type declaration to write.

The rendering path runs through a canvas context. The quick start gets a 2D context from a canvas element, wraps it in a Canvas component with a pixelRatio, and nests a Chart containing Axis, Interval and Tooltip components. The component tree is what the library walks to draw. That structure is also where the extension points sit: the README names Shape, animation and interaction as the customization surfaces, alongside chart style customization. The repository is a monorepo, with packages/ as a top-level directory, lerna.json and pnpm-workspace.yaml present, and the root package.json listing a bootstrap script that runs lerna bootstrap.

Installing @antv/f2 and drawing a first bar chart

The README gives a single install command for the package, which is published as @antv/f2 on npm. Run it in your project root.

npm install @antv/f2

Next you need a canvas element in the page. The quick start uses a canvas with the id mountNode and nothing else.

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

The README's data example is a JSON array of objects, each with a genre and a sold field. That array is passed straight to the Chart component. The component tree below is copied from the quick start, including the pixelRatio set from window.devicePixelRatio, which is what keeps the canvas sharp on a high-density phone screen. The Interval component with x, y and color is what produces the bars.

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

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();

After render() runs, the README's screenshot shows a bar chart with five colored bars, one per genre, with the tooltip available on interaction. If you are working inside this repository rather than consuming the package, the local development flow is different: the README lists npm install, then npm run bootstrap to initialize the monorepo, then npm run test, npm run dev to watch and build with the demo page, and npm run test-watch -- 'TestFileName' to open a single test case.

Where F2 is the wrong tool: canvas-only output and a mobile-sized API surface

The most concrete limitation is stated by the project itself rather than implied. F2 renders to HTML5 canvas. The README lists Node.js among the supported environments, but canvas output is a raster target, and nothing in the README claims a vector or server-side SVG export path. If your pipeline needs an SVG file for a print layout, or a chart embedded in a PDF on the server, F2's documented rendering model does not describe how you would get one. The README is silent on that scenario.

The second constraint is the mobile focus itself. A library tuned for small viewports and touch interaction is not automatically the right pick for a wide desktop analytics screen with dense axes, brush selection and dozens of series. F2 may still draw something there, but the README does not position it for that use, and the design guidance it cites is mobile design guidance.

The third is the mini program path. The README links to a separate wx-f2 repository for WeChat mini programs rather than describing WeChat support as part of the core package. That means the mini program story depends on a different codebase with its own release cadence, and you should check that repository's state before assuming parity with the main package.

Finally, the README does not document rollback or downgrade steps, and it does not document a migration guide between major versions. If you pin a version and later need to move, the README gives you nothing to work from.

F2 against ECharts and Chart.js: declarative grammar versus configured chart types

The clearest way to place F2 is against the two libraries most teams already know. ECharts and Chart.js both work primarily by naming a chart type and handing over a configuration object: you say you want a bar chart, then set options on it. F2 asks you to declare axes, an interval mark and encodings, and lets the grammar produce the chart. That is a real difference in day-to-day work, not a marketing distinction. With a configured chart type you get a large set of ready options for that one chart. With a grammar you get fewer ready-made switches and more control over how marks compose.

The trade-off follows from that. If you need a specific chart that F2 does not ship, the README's answer is the extension mechanism: custom Shape, animation and interaction. That is a code-writing task. In a configured-type library the equivalent move is often a plugin or a documented option. Teams without the appetite to write a Shape should weigh that honestly before choosing F2.

On environment coverage the split is different again. F2's README explicitly lists Node.js, Alipay mini programs, WeChat mini programs via wx-f2, React Native and Weex alongside H5. If your target is a mini program or a React Native screen, that list is the reason to look at F2 first rather than a browser-first library.

Licence, release cadence and what a version bump costs you

F2 is MIT licensed, and the LICENSE file sits at the repository root. MIT is permissive: it allows commercial use and modification provided the copyright notice and permission notice are retained. That is the general shape of the licence, not legal advice, and if your organization has rules about attribution in bundled output you should read the LICENSE file itself rather than this summary.

The repository is not archived. The most recent push recorded for it is 2026-05-19. The recent release list shows v5.14.0 on 2025-11-10, v5.13.0 on 2025-10-17 and v5.12.0 on 2025-09-24, so the 5.x line has been receiving releases at a fairly steady interval through that period.

The upgrade cost is the part the README does not help with. There is a CHANGELOG.md at the repository root and the root package.json defines a changelog script that runs generate-changelog, so release notes exist as a file. There is no migration guide in the README and no documented rollback procedure. In practice that means reading CHANGELOG.md between your pinned version and the target version is the only documented way to find out what a bump changes. The root package.json also exposes a canary script that builds, tests and publishes a canary under the next dist-tag, which is the documented way to try an unreleased build before adopting it.

Editorial conclusion

Adopt AntV F2 if your primary surface is a phone or a mini program and you want a canvas chart layer that does not assume a desktop dashboard. Do not adopt it if you need a server-rendered SVG chart for a PDF pipeline, or if you want a chart type F2 does not ship and are unwilling to write a custom Shape. Before committing, check the tutorial and API links on f2.antv.antgroup.com, confirm the exact @antv/f2 version you intend to pin, and decide whether your bundler path needs the module build or the full interactive bundle, since the README quotes different gzip sizes for each.

Frequently asked questions

Official sources

1. antvis/F2 on GitHub
2. License: MIT
3. Project website
4. README
5. Releases