Repolode
Submit
frappe

frappe/charts

A zero-dependency JavaScript library for rendering simple, responsive SVG charts with a GitHub-inspired look.

View on GitHubWebsite
Stars
15,093
Forks
755
Open issues
150
Last commit
19 days ago

What is it?

Frappe Charts is a charting library for the browser that turns arrays of values into SVG charts. It focuses on a small, simple API and a visual style inspired by charts on GitHub, and it has no runtime dependencies.

The library supports axis charts, area and trend charts, bar, line, pie, percentage, mixed-axis and heatmap charts. Charts can include x and y markers, regions and tooltips. Data points can be added, removed or updated in place, or the whole dataset can be replaced, and options such as colors, animations and titles can be customized.

It can be installed from npm, imported as an ES module, or loaded directly from a CDN with a UMD script tag. It was originally built for the ERPNext project, where a simpler chart was needed than existing libraries offered.

Key features

  • 01Supports axis, area, trend, bar, line, pie, percentage, mixed-axis and heatmap charts
  • 02Adds x and y markers, regions and tooltips for annotation
  • 03Updates individual data points in place or refreshes the whole dataset
  • 04Customizable colors, animations and titles
  • 05Has zero dependencies and is distributed via npm or a CDN

Use cases

  • Adding simple sales or activity graphs to a web dashboard
  • Showing charts in an admin or ERP-style interface without heavy chart libraries
  • Embedding lightweight SVG charts in pages where bundle size matters

Quick start

  1. 1

    Install the package from npm

    npm install frappe-charts
  2. 2

    Import the Chart class and its CSS in your project

    import { Chart } from 'frappe-charts'
  3. 3

    Create a chart with data, type and height options in a container element

In collections

Frontend frameworks & UI componentsData science courses & tools

Topics

#charts#svg#data-visualization#javascript#zero-dependency#frontend#chart#graph#hacktoberfest#svg-chart

FAQ

What is charts?
A zero-dependency JavaScript library for rendering simple, responsive SVG charts with a GitHub-inspired look. Frappe Charts is a charting library for the browser that turns arrays of values into SVG charts. It focuses on a small, simple API and a visual style inspired by charts on GitHub, and it has no runtime dependencies.
Is charts free to use? What license does it have?
charts is open source under the MIT license. Check the license terms before using it in commercial products.
Is charts still maintained?
Actively maintained. The last commit to charts was on Oct 19, 2026.
What can I use charts for?
Adding simple sales or activity graphs to a web dashboard Showing charts in an admin or ERP-style interface without heavy chart libraries Embedding lightweight SVG charts in pages where bundle size matters
How do I install charts?
Install the package from npm: npm install frappe-charts Import the Chart class and its CSS in your project: import { Chart } from 'frappe-charts' Create a chart with data, type and height options in a container element
Where can I get charts?
The source code and installation instructions are on GitHub: https://github.com/frappe/charts

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects