frappe/charts

Frappe Charts is a small JavaScript library for drawing charts on a web page. It produces SVG graphics, which means the charts stay crisp at any size and respond to the size of the browser window. The library has zero dependencies, so you do not need to pull in other tools to use it. The visual style is inspired by the kind of charts you see on GitHub. The project was started inside Frappe's own product, ERPNext, when the team needed a simple sales history graph. They were using c3.js but felt it did not match their product's look, and other libraries they tried felt either too complex or too rigid. So they wrote their own with a focus on a simple API: feed it pairs of values, get back shapes and positions on a chart. The library supports several chart types. The README lists Axis Charts, Area and Trends, Bar, Line, Pie, Percentage, Mixed Axis, and Heatmap. You can add annotations such as x and y markers, regions on the chart, and tooltips that show extra information when a viewer hovers over a point. Data can be changed after a chart is drawn: you can add, remove, or update individual points, or swap in a whole new dataset. Colors, animations, and titles are configurable. Using it is straightforward. You install it with npm, then import the Chart constructor in your code, or you can drop a single script tag into an HTML page to use it without a build step. You then create a new Chart, point it at an element on the page, and pass an object with labels, datasets, a chart type, height, and colors. The README shows a short example that mixes a bar series and a line series on the same axes. Contributing follows the usual pattern: clone the repo, run npm install, then npm run dev. The README also links to a demo site, a CodeSandbox example, full documentation, and a blog post about why the team built the library in the first place.