shivam.dev

Frappe Charts

Frappe Charts is a simple lightweight and modern SVG charts for the web with zero dependencies.

frappe-charts

Frappe Charts was started by a dear friend Prateeksha when she worked at Frappe, when I joined I continued building and maintaing the library and been continuing to do so. The project was launched on HackerNews on 31st October, it recieved overwhelming response, garnered over 470 points and was also featured in GitHub Octoverse 2018. Read the launch story here.

The Library

The original design was inspired by GitHub, the library also included a heatmap just like the github contribution graph.

Heatmap

Since then, we've redesigned the library for v2. It was largely cosmetic, with a better color palette, extra config options, new tooltips, legends and quite a few bug fixes. These charts are built using SVG, all the data processing and SVG components are built using vanilla JS without external libraries.

Chart Types

The following are the chart types supported, I don't plan on increasing this list for now, moreover most projects don't need more than these.

  • Axis Mixed Charts: This includes line charts and bar charts, you can also use both in one chart
  • Aggregate Charts: This includes percentage chart, donut and pie charts, you can also use both in one chart
  • Heatmap: This is the classic heatmap chart
Line Chart
Bat Chart
Donut Chart
Pie Chart
Percentage Chart
Heatmap

This is just a sample of what these library offers, you can check out more at the homepage or this codesandbox demo

📫  Wanna learn more about my projects?

I'll send an email only when I publish something on my blog, which is usually once month at best, and you can unsubscribe instantly at any time. So don't worry about spam. I use Buttondown to host this newsletter, It's trusted by many for it's privacy practices, you can read more here.

If you're interested, drop your email below

Powered by Buttondown.