Creating Hand-Drawn Style Line Charts with JavaScript – Handwritten Graph

Handwritten Graph is a lightweight JavaScript library for creating xkcd sketch-style line charts using d3.js and SVG.

Key Features:

• Generates line graphs with a distinct handwritten style.
• Customizable line colors, point colors, and point sizes per dataset.
• Adjustable jitter parameter to control the “sketchiness”.
• Simple data structure using labels and datasets.
• Configurable dimensions and margins.

Use Cases:

• Quick data visualizations: Generate informal graphs for quick data displays in internal dashboards.
• Project prototypes: Create engaging visuals during early development stages without complex setup.
• Educational examples: Illustrate data concepts with graphs that look approachable and hand-drawn.
• Interactive reports: Add a creative twist to reports that require less formal visual representation.

How to use it:

1. Install and import Handwritten Graph library with NPM.

# NPM
$ npm install handwritten-linegraph

import { createGraph } from 'handwritten-graph';

2. Or, if you’re not using a module bundler, grab the distribution file (e.g., handwritten-graph.js from the dist folder after building) and include it directly:

<script src="/dist/handwritten-graph.js"></script>

3. Create a container element where the graph will be rendered.

<script src="handwritten-graph.js"></script>

4. Define your data and render it as a line chart on your webpage as follows:

• labels: An array of strings for the X-axis categories.
• label: String identifier for the dataset (might be used for legends in future versions, currently good for reference).
• data: Array of numerical values corresponding to the labels.
• lineColor: CSS color string for the line.
• pointColor: CSS color string for the data points.
• pointRadius: Number for the radius of the points.
• jitter: Number controlling the randomness applied to this specific dataset’s line/points. Lower values are less shaky.

const myData = {
  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
  datasets: [{
    label: 'Widget Sales',
    data: [120, 150, 90, 180],
    lineColor: 'blue', 
    pointColor: 'darkblue',
  }]
};

createGraph('#graph-container', myData);
// Browser
// HandwrittenGraph.createGraph('#graph-container', myData);

5. Configure the line chart with the following options.

• width: Number, graph width in pixels.
• height: Number, graph height in pixels.
• margin: Object { top, right, bottom, left } defining space around the chart area.
• jitter: Number, global jitter setting. I’d recommend starting low (like 0.1 – 0.3) and increasing.
• pointRadius: Number, global default point radius.

createGraph('#graph-container', myData,{
  width: 960,
  height: 500,
  margin: { top: 10, right: 10, bottom: 40, left: 50 },
  jitter: 1.9,
  pointRadius: 4,
});

You might also like:

• Cartoon XKCD Styled Chart Library – roughViz.js

Changelog:

04/15/2025

• refactor: address style bleeding issue with scoped container styling