Introducing F2

An elegant, interactive and flexible charting library for mobile.

Sima
Sima
Aug 24, 2018 · 4 min read
Image for post
Image for post

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.

Image for post
Image for post
From left to right: Line Chart, Stack Bar Chart and Donut Chart.
Image for post
Image for post
Interactions

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Some designs come from the network, but charts are implemented by F2.
Image for post
Image for post

Other libraries base on F2

We are trusted by

Image for post
Image for post

Here are some examples of apps’ charts drawn using F2.

Image for post
Image for post

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.

Links

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store