Repolode
Submit
timqian

timqian/chart.xkcd

A JavaScript chart library that renders line, bar and other charts in a hand-drawn, xkcd-like sketchy style using SVG.

View on GitHubWebsite
Stars
7,872
Forks
207
Open issues
3
Last commit
17 days ago

What is it?

chart.xkcd is a JavaScript chart library that draws charts in a "sketchy", cartoony, hand-drawn style inspired by the xkcd comic. Charts are rendered into a single SVG element on the page, so you only need to include the script and point it at an <svg> node to get a chart.

You create a chart by instantiating a constructor such as chartXkcd.Line with the target SVG, then pass a title, axis labels, and a data object with labels and datasets. The library is loaded from a CDN or npm, and the project provides a documentation site with examples.

It suits informal presentations, blog posts, or diagrams where a polished, corporate look is not wanted.

Key features

  • 01Renders line charts and other chart types with a hand-drawn, sketchy look.
  • 02Draws everything into a single SVG element on the page.
  • 03Configured through a simple data object with labels and datasets.
  • 04Available via CDN or npm as a plain browser script.
  • 05Supports titles and x/y axis labels.

Use cases

  • Adding a playful, informal chart to a blog post or presentation.
  • Illustrating estimates or plans in a non-corporate, hand-drawn style.
  • Embedding quick charts in a static HTML page without a build step.

Quick start

  1. 1

    Include the chart.xkcd script and an SVG node in your page

    <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@2/dist/chart.xkcd.min.js"></script>
  2. 2

    Create a line chart with new chartXkcd.Line on the SVG element

In collections

Frontend frameworks & UI componentsData science courses & tools

Topics

#chart#svg#data-visualization#javascript#hand-drawn#frontend#graph#html5#html5-charts#svg-sprite

FAQ

What is chart.xkcd?
A JavaScript chart library that renders line, bar and other charts in a hand-drawn, xkcd-like sketchy style using SVG. chart.xkcd is a JavaScript chart library that draws charts in a "sketchy", cartoony, hand-drawn style inspired by the xkcd comic. Charts are rendered into a single SVG element on the page, so you only need to include the script and point it at an <svg> node to get a chart.
Is chart.xkcd free to use? What license does it have?
chart.xkcd is open source under the MIT license. Check the license terms before using it in commercial products.
Is chart.xkcd still maintained?
Actively maintained. The last commit to chart.xkcd was on Oct 21, 2026.
What can I use chart.xkcd for?
Adding a playful, informal chart to a blog post or presentation. Illustrating estimates or plans in a non-corporate, hand-drawn style. Embedding quick charts in a static HTML page without a build step.
How do I install chart.xkcd?
Include the chart.xkcd script and an SVG node in your page: <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@2/dist/chart.xkcd.min.js"></script> Create a line chart with new chartXkcd.Line on the SVG element
Where can I get chart.xkcd?
The source code and installation instructions are on GitHub: https://github.com/timqian/chart.xkcd

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects