Frappe Charts — Simple Modern SVG Charts with Zero Dependencies

Introduction

Frappe Charts is a lightweight SVG charting library inspired by GitHub's contribution graph style. It provides clean, responsive charts with smooth animations and a minimal API surface, making it a practical choice when you need attractive data visualizations without pulling in a large charting framework.

What Frappe Charts Does

• Renders bar, line, percentage, pie, donut, and heatmap charts as inline SVG
• Animates transitions when data updates for smooth visual feedback
• Supports mixed chart types on a single axis for composite visualizations
• Provides data point navigation with tooltips and click events
• Works with any framework or vanilla JavaScript with no dependencies

Architecture Overview

Frappe Charts generates SVG elements directly in the DOM from a declarative data and options object. Each chart type has a dedicated renderer that calculates scales, draws axes, and positions data marks. Animations use CSS transitions on SVG attributes. The library manages its own coordinate system, scaling to the container width automatically on resize.

Self-Hosting & Configuration

• Install from npm or include the CDN bundle in a script tag
• Pass a container selector, data object, and chart type to the constructor
• Customize colors, height, axis behavior, and tooltip formatting via options
• Update data dynamically with chart.update(newData) for live dashboards
• Export charts as SVG images for use in reports or documentation

Key Features

• Zero external dependencies and under 20 KB minified
• GitHub-style heatmap chart for contribution or activity visualizations
• Mixed axis types combining bars and lines in one chart
• Smooth animations on data transitions and initial render
• Responsive SVG output that scales to any container width

Comparison with Similar Tools

• Chart.js — Canvas-based with a larger plugin ecosystem; Frappe Charts uses SVG and is lighter
• D3.js — Low-level visualization grammar; Frappe Charts is a high-level ready-to-use library
• ApexCharts — Feature-rich with many chart types; Frappe Charts is simpler with a smaller footprint
• uPlot — Focused on high-performance time series; Frappe Charts covers more chart types with a friendlier API

FAQ

Q: Does Frappe Charts support real-time data updates? A: Yes. Call chart.update(data) with new values and the chart animates to the new state.

Q: Can I use it with React or Vue? A: Yes. Mount it in a ref-attached container using lifecycle hooks. Community wrapper components are also available.

Q: How does the heatmap chart work? A: Pass date-keyed data and the library renders a GitHub-style year grid with color-coded intensity cells.

Q: Is it accessible? A: The SVG output includes basic structure, but you may want to add ARIA labels for screen reader support in production.

Sources

• https://github.com/frappe/charts
• https://frappe.io/charts