A small chart library, based on SVG to generate charts, very easy to use, recommended to everyone.
About Frappe Charts
Frappe Charts is a small and simple JavaScript charting library. With a few simple parameters, it can quickly generate beautiful and atmospheric charts similar to Github .
The author of the Frappe Charts charting library is the developer Frappe. This project was born because he encountered the need to generate charts in the project. However, although many charting libraries are powerful, they are very complicated to use. In order to support various professional functions, resulting in very bloated, and not easy to customize, it is difficult to combine with existing products.
Frappe liked the charts shown on Github so much that he decided to write his own UI and experience with a simple charting library like Github Charts.
Technical Features of Frappe Charts
- Lightweight js chart library without dependencies, only 18KB after gzip compression
- Generate charts based on SVG, performance is better than regular canvas charts
- Both data generation and hover view have comfortable interactive effects, and the experience is very good
- Not only supports configuration color, appearance customization is also very convenient
- Whether it is data update or screen size change, it can quickly respond and update the chart
- Support regular line chart (line), bar chart (bar), scatter chart (scatter), pie chart (pie), percentage chart (percentage)
Frappe Charts development experience and suggestions
Recently, I received a request to generate charts. The chart library used in the past was very large. Most of the projects in operation did not have enough data to support a page with a large data screen. Many professional chart functions were completely unusable.
Frappe Charts is a lightweight charting library. If you have used charts like chart.js , you can generate a chart almost immediately with a glance at the document.
npm install
Introduce and initialize in the project:
Of course, the easiest way is to directly import it online in the HTML page:
The basic chart generation is complete. Of course, Frappe Charts also supports setting X-axis and Y-axis labels, icons, and tick marks. For specific usage, please refer to the official documentation. However, the official website seems to be hosted on Github, and domestic access is very unstable. Tools may be required to browse.
Frappe Charts generates charts based on SVG. This format can be directly downloaded and saved, and can also be imported into vector graphics editing software such as Sketch for secondary modification.
In addition, it also supports an annual heat map similar to Github's submitted code statistics, which is also beautiful and elegant, but it seems that this kind of chart is not used much.
Associated project
Because Frappe Charts has no other dependencies, it can be easily used with other frameworks.
- react-frappe-charts: Use Frappe Charts in React
- vue2-frappe: a packaged Vue component
Free Open Source Instructions
Frappe Charts is a free and open source JavaScript charting library, authored by Frappe, the source code is hosted on Github under the MIT open source protocol , anyone can download and use it for free, and can also be used in commercial projects.
Original link: https://www.thosefree.com/frappe-charts