AntV
Search…
F2
Installation
Getting Started
Data
Understanding F2 charts
Require on demand
F2 in Node.js
API
Developer
Changelog
License
Powered By GitBook
F2
Introducing F2
​​
​​
F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based, and is also compatible with Node.js, Weex and React Native. Based on the grammar of graphics, F2 provides all the chart types you'll need. Our mobile design guidelines enable better user experience in mobile visualzation projects
Special thanks to Leland Wilkinson, the author of The Grammar Of Graphics, whose book served as the foundation for F2 and G2.

$ npm install @antv/f2

  • Design for mobile: make data more alive and chart interactions more natural.

With the power of grammar of graphics, F2 supports data-driven 50+ chart types(the amount can be even more, which is depended on you) including classical charts such as line, column/bar chart, pie chart, scatter plot, gauges, etc. Additionally, F2 also provides feature-riched chart components, such as Tooltip, Legend and Guide.

We also provide developers with flexible extension mechanisms, including shape, animation, and interactive customization capabilities, as well as flexible styling to meet a variety of personalized charting requirements.

  • ​ant-design-mobile-chart: Ant Design Mobile Chart based on F2. (React).
  • ​BizGoblin：Data visualization library based F2 and React.
  • ​VChart: Mobile Chart Components based on vux and F2. (Vue).
  • ​weex-chart: Chart components based on Weex and F2.

Or just scan the below qrcode to see demos in mobile:
​​
​​

​​
​​
<canvas id="mountNode"></canvas>
import F2 from '@antv/f2';
​
const data = [
{ year: '1951', sales: 38 },
{ year: '1952', sales: 52 },
{ year: '1956', sales: 61 },
{ year: '1957', sales: 145 },
{ year: '1958', sales: 48 },
{ year: '1959', sales: 38 },
{ year: '1960', sales: 38 },
{ year: '1962', sales: 38 },
];
const chart = new F2.Chart({
id: 'mountNode',
width: 375,
height: 265,
pixelRatio: window.devicePixelRatio
});
chart.source(data);
chart.interval().position('year*sales');
chart.render();

$ npm install
​
# run test case
$ npm run test-live
​
# build watching file changes and run demos
$ npm run dev
​
# run demos
$ npm run demos
​
# run pack
$ npm run bundler

Please let us know how can we help. Do check out issues for bug reports or suggestions first.
To become a contributor, please follow our contributing guide.

Next
Installation
Last modified 4yr ago
Copy link
On this page
Installation
Features
Born for mobile
All the chart types you want
Flexible and Interactive
Links
Other libraries base on F2
Demos
Getting Started
Development
How to Contribute
License