Frappe Charts
A small JavaScript library that draws responsive SVG charts with no other dependencies.frappe/charts
- Stars
- 15.1k
- Forks
- 755
- Licence
- MIT
- Language
- JavaScript
- Last update
- 18 days ago
- Type
- Library
What it is
Frappe Charts is a JavaScript charting library that draws charts as SVG graphics in a web page. Its API is designed to be simple, and its visual style is inspired by charts on GitHub. Developers use it to add bar, line, pie, area, percentage, mixed-axis, and heatmap charts to web apps without pulling in other libraries.
- Show a sales history graph inside a dashboard
- Display a mixed bar-and-line chart comparing two datasets
- Render a pie or percentage chart for a breakdown of categories
- Add, remove or update data points in an existing chart
Great for
- Developers adding basic or medium-complexity charts to a web app
- Teams that want a small, dependency-free charting option
- Projects that need charts to resize across screen sizes
- Developers who want to update chart data in place
Not ideal for
- Users needing highly specialized or 3D charts, since the README lists only the chart types above
- Projects that need a library with extensive built-in interactivity, because the README describes only annotations, tooltips and basic customization
How to get it
- 1
Install with a package manager
You'll need: Node.js or a web page where you can include a script tag
Install from npm
npm install frappe-charts - 2
Run it
- Install the package with npm install frappe-charts, or include the UMD script from unpkg in your HTML.
- Add a container element to your page with an id such as chart.
- Define a data object with labels and datasets.
- Create a new frappe.Chart (or new Chart when using ES modules) with the container, data, chart type and height.
- Open the page in a browser to see the chart.
- 3
Get the most out of it
- Use the type option to switch between axis-mixed, bar, line, scatter, pie and percentage charts
- Set the colors option to match your product's palette
- Use the built-in methods to add, remove or update data points without redrawing the whole chart
- Explore the live demos and CodeSandbox example linked in the README before writing your own setup
Downloads
Strengths
- Has zero dependencies, as stated in its description and README
- Supports many common chart types in one library
- Offers a simple API with configuration options for colors, animations and titles
Trade-offs
- The README is short and does not document every option, so details need to be checked in the separate documentation site
- The README does not state browser support or how it compares in performance to other libraries
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| charts (this) | 15.1k | Library | beginner | 18 days ago | Developers adding basic or medium-complexity charts to a web app |
| Chart.js | 67.8k | Library | intermediate | 14 days ago | Web developers adding standard charts such as line or bar charts to a site |
| recharts | 27.7k | Library | beginner | 4 days ago | React developers who need standard charts such as line, bar or similar graphs in a web app |
| visx | 21.1k | Library | intermediate | 5 months ago | React developers who want full control over how a chart looks and behaves |
| mind-map | 12.9k | Library | intermediate | 3 months ago | Developers who want to add mind map editing to their own web product |
| G2 | 12.7k | Library | intermediate | 8 days ago | Front-end developers adding charts to a web dashboard |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.