# Frappe Charts — Simple Modern SVG Charts with Zero Dependencies

> A GitHub-inspired, zero-dependency charting library that renders responsive SVG charts with a clean API, built by the Frappe team.

## Install

Save as a script file and run:

# Frappe Charts — Simple Modern SVG Charts with Zero Dependencies

## Quick Use
```bash
npm install frappe-charts
# In your app:
# import { Chart } from 'frappe-charts';
# new Chart('#chart', {
#   data: { labels: ['Mon','Tue','Wed'], datasets: [{ values: [10,20,30] }] },
#   type: 'bar'
# });
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-5278a81a
Author: Script Depot