Introducing F2

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.

From left to right: Line Chart, Stack Bar Chart and Donut Chart.
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.

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.

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

Other libraries base on 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.

Links

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Building a Nodemon Clone from Scratch in 20 lines of JavaScript

nodemon clone in node.js

入門Next.js deploy與deploy之後修改

Koa.js REST API

The Four ways to Create Loading Spinners in an Angular app

Angular Material Navigation drawer — Adding support mode = “Rail” (mini variant behaviour)

Prime Solvers

Creating Login System in Angular and FastAPI

How to push edits/ changes to your React APP on gh-pages

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
Sima

Sima

More from Medium

Zoom and pan in Three.js customly — Simple Interactions in Data & Graph Visualization

Exploring data in interactive games

Cleaning and Manipulating Text in Excel

Data Visualization (told for dummies)