# timqian/chart.xkcd

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/timqian-chart-xkcd).**

7,838 stars · 207 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/timqian/chart.xkcd
- Homepage: https://timqian.com/chart.xkcd/
- awesome-repositories: https://awesome-repositories.com/repository/timqian-chart-xkcd.md

## Topics

`chart` `graph` `hand-drawn` `html5` `html5-charts` `svg` `svg-sprite` `xkcd`

## Description

chart.xkcd is a client-side JavaScript library used to generate data visualizations as scalable vector graphics directly in the browser. It functions as a graphing utility that manipulates DOM elements to produce various chart types without requiring server-side dependencies.

The library is distinguished by a rendering engine that applies randomized stroke offsets and variable line weights to SVG paths. This process simulates a sketchy, hand-drawn aesthetic for data charts, creating a comic-like visual style.

The project supports a variety of visualization formats, including bar, line, circular, radar, and XY coordinate charts. It also provides capabilities for stacked bar charts to show part-to-whole relationships and combined charts that overlay different dataset types on shared axes.

The library is distributed as a single-file bundle for integration via a script tag and uses a JavaScript configuration API to initialize charts through plain objects.

## Tags

### Graphics & Multimedia

- [Client-Side Charting Utilities](https://awesome-repositories.com/f/graphics-multimedia/client-side-charting-utilities.md) — Provides a lightweight, browser-based utility for rendering various data charts without server-side dependencies.
- [Hand-Drawn Aesthetic Simulation](https://awesome-repositories.com/f/graphics-multimedia/path-offsetting-and-replacement/hand-drawn-aesthetic-simulation.md) — Simulates a hand-drawn aesthetic by applying randomized stroke offsets and variable line weights to SVG paths.
- [SVG Chart Renderers](https://awesome-repositories.com/f/graphics-multimedia/chart-geometry-renderers/svg-chart-renderers.md) — Renders data-driven charts by constructing and manipulating SVG elements directly in the browser DOM.
- [Hand-Drawn Graphics Libraries](https://awesome-repositories.com/f/graphics-multimedia/hand-drawn-graphics-libraries.md) — Provides a library for rendering web graphics and charts with a simulated human-drawn aesthetic.
- [Chart Composition Layers](https://awesome-repositories.com/f/graphics-multimedia/composition-visual-layers/chart-composition-layers.md) — Supports layering different dataset types on shared axes via SVG element group composition.
- [Hand-Drawn Plotting](https://awesome-repositories.com/f/graphics-multimedia/hand-drawn-graphics-libraries/hand-drawn-plotting.md) — Provides a utility to produce hand-drawn style plots and coordinates by manipulating the SVG DOM.
- [Programmatic Chart Configuration](https://awesome-repositories.com/f/graphics-multimedia/programmatic-chart-configuration.md) — Provides a programmatic API for declarative chart setup using JavaScript objects.
- [Overlaid Chart Combinations](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/composite-visualizations/mixed-chart-types/overlaid-chart-combinations.md) — Overlays different dataset types, such as bars and lines, on a shared coordinate system. ([source](https://timqian.com/chart.xkcd/))

### Data & Databases

- [Bar Charts](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/analytical-platforms-engines/data-analysis-tools/bar-charts.md) — Renders data values using vertical bars to compare categorical values. ([source](https://timqian.com/chart.xkcd/))
- [Sketched](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/analytical-platforms-engines/data-analysis-tools/bar-charts/sketched.md) — Plots data as hand-drawn bar charts on SVG elements with customizable labels. ([source](https://cdn.jsdelivr.net/gh/timqian/chart.xkcd@main/README.md))
- [Pie Charts](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/chart-components-utilities/pie-charts.md) — Visualizes data proportions using pie and doughnut chart formats. ([source](https://timqian.com/chart.xkcd/))
- [Sketched Circular Charts](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/chart-components-utilities/pie-charts/sketched-circular-charts.md) — Plots data as hand-drawn pie charts on SVG elements using custom labels. ([source](https://cdn.jsdelivr.net/gh/timqian/chart.xkcd@main/README.md))
- [XY Charts](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/chart-components-utilities/xy-charts.md) — Maps data points to specific coordinates to create scatter or line plots. ([source](https://timqian.com/chart.xkcd/))
- [Radar Chart Renderers](https://awesome-repositories.com/f/data-databases/data-visualization-charts/radar-chart-renderers.md) — Plots multivariate data on radiating axes to compare multiple dimensions. ([source](https://timqian.com/chart.xkcd/))
- [Sketched Radar Charts](https://awesome-repositories.com/f/data-databases/data-visualization-charts/radar-chart-renderers/sketched-radar-charts.md) — Plots data as hand-drawn radar charts on SVG elements using custom labels. ([source](https://cdn.jsdelivr.net/gh/timqian/chart.xkcd@main/README.md))
- [Stacked](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/analytical-platforms-engines/data-analysis-tools/bar-charts/stacked.md) — Displays data as stacked vertical bars to visualize part-to-whole relationships. ([source](https://timqian.com/chart.xkcd/))
- [Proportional Data Plots](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/data-visualization/proportional-data-plots.md) — Renders pie and doughnut charts to visualize fractional and percentage-based data distributions.
- [Categorical Comparison Charts](https://awesome-repositories.com/f/data-databases/data-visualization-charts/categorical-comparison-charts.md) — Includes radar and combined charts for comparing multi-variable relationships and different data groups.

### User Interface & Experience

- [Aesthetic Style Overlays](https://awesome-repositories.com/f/user-interface-experience/aesthetic-theme-implementations/aesthetic-style-overlays.md) — Applies aesthetic style overlays like randomized stroke offsets to simulate a sketchy, hand-drawn feel.
- [Line Charts](https://awesome-repositories.com/f/user-interface-experience/data-visualization-tools/data-visualization/specific-chart-types/line-charts.md) — Displays data series as lines to visualize trends or compare datasets. ([source](https://timqian.com/chart.xkcd/))
- [Sketched](https://awesome-repositories.com/f/user-interface-experience/data-visualization-tools/data-visualization/specific-chart-types/line-charts/sketched.md) — Plots data as hand-drawn line charts on SVG elements using labels and axis titles. ([source](https://cdn.jsdelivr.net/gh/timqian/chart.xkcd@main/README.md))
- [Informal Data Presentations](https://awesome-repositories.com/f/user-interface-experience/informal-data-presentations.md) — Implements comic-style charts that make technical data more approachable for web audiences.

### Web Development

- [Browser-Based Charting Libraries](https://awesome-repositories.com/f/web-development/browser-based-charting-libraries.md) — Implements a JavaScript library that renders data visualizations directly in the browser using SVG.
- [Client-Side Chart Renderers](https://awesome-repositories.com/f/web-development/client-side-chart-renderers.md) — Provides a comprehensive JavaScript library for rendering various data visualizations directly in the browser.
- [Client-Side Execution Environments](https://awesome-repositories.com/f/web-development/client-side-execution-environments.md) — Provides all charting logic and rendering exclusively within the browser environment.
- [Direct DOM Manipulation](https://awesome-repositories.com/f/web-development/direct-dom-manipulation.md) — Renders visualizations by manipulating SVG DOM elements directly in the browser.