Handwritten Graph Library Documentation¶

A modern TypeScript library for creating hand-drawn style charts inspired by comics and sketches. Built with D3.js and designed with type safety and excellent developer experience in mind.

Features¶

✨ Hand-drawn/sketched visual style - Authentic comic-book aesthetic

📊 Multiple chart types - Line graphs, bar charts, and pie charts

🔧 TypeScript support - Full type definitions and IntelliSense

🎯 Multi-series support - Handle complex datasets with ease

🎭 Interactive tooltips - Hover effects with detailed information

🎪 Directional scribble fills - Artistic fill patterns for charts

🎨 Oil paint textures - Rich watercolor-like effects

⚙️ Highly configurable - Extensive customization options

🧩 Modern architecture - Clean OOP design with proper separation of concerns

Quick Start¶

Installation¶

npm install handwritten-graph

yarn add handwritten-graph

<script src="https://unpkg.com/handwritten-graph@latest/dist/handwritten-graph.js"></script>

Basic Usage¶

import { LineChart, BarChart, PieChart } from 'handwritten-graph';

// Sample data
const chartData = {
  labels: ["Q1", "Q2", "Q3", "Q4"],
  datasets: [{
    label: "Revenue",
    data: [65, 59, 80, 81],
    lineColor: "rgb(75, 192, 192)"
  }]
};

// Create line chart
const lineChart = new LineChart("#chart-container", chartData, {
  showArea: true,
  useScribbleFill: true
});

// Using factory functions
const cleanup = HandwrittenGraph.createGraph("#chart-container", chartData);

// Clean up when done
cleanup();

Live Demo¶

Check out the interactive demo to see the library in action!

Documentation Contents¶

Getting Started

API Reference

Advanced Topics

Advanced Styling

Browser Support¶

Chrome/Edge 90+
Firefox 88+
Safari 14+
Modern mobile browsers

License¶

MIT License - see LICENSE file for details.