F2 is a free and open-source modern charting library, released under MIT license. The aim of F2 is helping developers to create interactive visualizations for mobile devices more easier. 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 visualization projects.
Features
Born for mobile
Based on the ‘accurate, effective, clear and beautiful’ visualization principles, combining with mobile device features (different devices, lacking of computing power and touch interface) and people’s habits of using mobile devices, F2 provides users with the best experience for mobile visualization from the perspective of design, performance and platform compatibility.
Design, make data more alive and chart interactions more natural. In design, the easy-to-understand, attractive expressions allowing users to get information of charts faster and more efficient during fragmented time. And about interaction, the combination of content and operation is the most in-demand during the interactive process on mobile devices, which means that the interaction behavior and its feedback is required to match the nature behavior of human. The following gifs show the interaction of single touch-drag for data exploration and multi-touch for zooming provided by F2.
Performance, although the hardware and computing power of mobile devices have been continuously improved, most users are not using the latest and most powerful mobile devices. As a result, F2 has always been pursuing better performance in rendering, doing a lot of optimization for mobile devices. With wide selection of chart types and still maintains a small package size(version without interaction is 44k after gzip). It also provides a modular design to support dynamic loading, you can get a even better size.
Compatibility, besides H5 env, F2 can also run in Node.js, Weex rendering and React Native, also Alipay Mini Programs and WeChat Mini Programs.
All the chart types you want
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.
Flexible and Interactive
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.
Other libraries base on F2
- 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.
We are trusted by
Here are some examples of apps’ charts drawn using F2.
Conclusion
Thanks for reading. Go install it, star it, and give it a try! 🎉
If you encounter any problems when using F2, feel free to file a new issue on GitHub.
