Hand-drawn Style SVG Chart Library - chart.xkcd

Authortimqian

Last UpdateJune 16, 2026

LicenseMIT

Features:

6 chart types: line, bar, stacked bar, pie/doughnut, radar, XY scatter, and combined bar+line charts.
Uses Rough.js under the hood to render sketchy, hand-drawn lines and shapes.
Disable the hand-drawn effect with a single option to switch to clean, standard SVG strokes.
Customize tick counts, data colors, font families, legend position, and background/stroke colors.
Accepts data as simple label and value arrays, with multi‑dataset support for comparisons.
Outputs pure SVG that scales responsively and prints at high resolution.
No external CSS or icon font requirements.

How To Use It:

Installation

Load the chart.xkcd library from a CDN.

<svg id="signupChart"></svg>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.xkcd.min.js"></script>

Modern projects can install the package from npm.

npm i chart.xkcd

Import it inside your JavaScript bundle.

import chartXkcd from 'chart.xkcd';

Basic Usage

A basic line chart needs one SVG node, one labels array, and one or more datasets. Run the JavaScript after the SVG exists in the document.

<svg id="weeklySignups"></svg>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.xkcd.min.js"></script>
<script>
  const chartTarget = document.querySelector('#weeklySignups');
  new chartXkcd.Line(chartTarget, {
    title: 'Weekly trial signups',
    xLabel: 'Week',
    yLabel: 'Users',
    data: {
      labels: ['W1', 'W2', 'W3', 'W4', 'W5'],
      datasets: [
        {
          label: 'Free trials',
          data: [42, 58, 61, 75, 93]
        }
      ]
    },
    options: {
      yTickCount: 4,
      legendPosition: chartXkcd.config.positionType.upRight
    }
  });
</script>

More Chart Types

A bar chart fits category comparisons such as traffic sources, plan counts, or feature votes. The labels array defines the categories, and the dataset array defines the values.

const trafficSvg = document.querySelector('#trafficSources');
new chartXkcd.Bar(trafficSvg, {
  title: 'Traffic sources',
  xLabel: 'Source',
  yLabel: 'Visits',
  data: {
    labels: ['Search', 'Social', 'Referral', 'Email'],
    datasets: [
      {
        data: [1280, 420, 310, 190]
      }
    ]
  },
  options: {
    yTickCount: 3,
    dataColors: ['#6c8cff']
  }
});

A stacked bar chart is suitable for grouped totals with the same labels. Each dataset becomes one stack segment for every label.

const supportSvg = document.querySelector('#supportRequests');
new chartXkcd.StackedBar(supportSvg, {
  title: 'Support requests by channel',
  xLabel: 'Month',
  yLabel: 'Tickets',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [
      {
        label: 'Email',
        data: [34, 28, 31, 25]
      },
      {
        label: 'Chat',
        data: [19, 23, 27, 30]
      },
      {
        label: 'Forum',
        data: [8, 11, 9, 13]
      }
    ]
  },
  options: {
    showLegend: true,
    legendPosition: chartXkcd.config.positionType.downRight
  }
});

A pie or doughnut chart works well in share-based data such as browser usage or sales split. Set the inner radius to 0 for a pie chart or keep a value above 0 for a doughnut chart.

const browserSvg = document.querySelector('#browserShare');
new chartXkcd.Pie(browserSvg, {
  title: 'Browser share',
  data: {
    labels: ['Chrome', 'Safari', 'Edge', 'Firefox'],
    datasets: [
      {
        data: [64, 18, 11, 7]
      }
    ]
  },
  options: {
    innerRadius: 0.45,
    legendPosition: chartXkcd.config.positionType.upRight
  }
});

An XY chart is great for coordinate data and scatter plots. Enable line drawing when each point belongs to a sequence instead of a loose point cloud.

const latencySvg = document.querySelector('#latencyTrend');
new chartXkcd.XY(latencySvg, {
  title: 'API latency samples',
  xLabel: 'Request',
  yLabel: 'Milliseconds',
  data: {
    datasets: [
      {
        label: 'Endpoint A',
        data: [
          { x: 1, y: 120 },
          { x: 2, y: 98 },
          { x: 3, y: 135 },
          { x: 4, y: 110 }
        ]
      }
    ]
  },
  options: {
    xTickCount: 4,
    yTickCount: 4,
    showLine: true,
    dotSize: 1.2
  }
});

A radar chart works for profile-style comparisons across the same dimensions. Keep the labels short because each label appears around the chart shape.

const qualitySvg = document.querySelector('#qualityRadar');
new chartXkcd.Radar(qualitySvg, {
  title: 'Release quality score',
  data: {
    labels: ['Speed', 'Tests', 'UX', 'Docs', 'Stability'],
    datasets: [
      {
        label: 'Current',
        data: [4, 3, 5, 4, 4]
      },
      {
        label: 'Target',
        data: [5, 5, 5, 5, 5]
      }
    ]
  },
  options: {
    showLegend: true,
    showLabels: true,
    ticksCount: 5,
    dotSize: 0.9
  }
});

A combined chart places bar and line datasets on the same labels and y axis. Set each dataset type to match the visual treatment you need.

const funnelSvg = document.querySelector('#signupFunnel');
new chartXkcd.Combined(funnelSvg, {
  title: 'Visitors and conversions',
  xLabel: 'Month',
  yLabel: 'Count',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [
      {
        label: 'Visitors',
        type: 'bar',
        data: [1200, 1380, 1260, 1510, 1680]
      },
      {
        label: 'Conversions',
        type: 'line',
        data: [84, 96, 91, 118, 132]
      }
    ]
  },
  options: {
    yTickCount: 4,
    legendPosition: chartXkcd.config.positionType.upLeft
  }
});

Configuration Options

Top-level chart configuration:

title (string): Adds an optional chart title.
xLabel (string): Adds an optional label for the x axis.
yLabel (string): Adds an optional label for the y axis.
data (object): Defines chart labels and datasets.
options (object): Defines optional visual and chart-specific settings.

Shared visual options:

dataColors (array): Sets custom colors for datasets or chart segments.
fontFamily (string): Sets the chart font family.
unxkcdify (boolean): Turns off the sketch-style effect when set to true.
strokeColor (string): Sets the main stroke color. The default value is black.
backgroundColor (string): Sets the chart background color. The default value is white.
showLegend (boolean): Shows or hides the legend. Most chart types default to true. Radar charts default to false.
legendPosition (constant): Sets the legend position.
chartXkcd.config.positionType.upLeft (constant): Places the legend at the upper left.
chartXkcd.config.positionType.upRight (constant): Places the legend at the upper right.
chartXkcd.config.positionType.downLeft (constant): Places the legend at the lower left.
chartXkcd.config.positionType.downRight (constant): Places the legend at the lower right.

Line chart options:

yTickCount (number): Sets the number of y-axis ticks. The default value is 3.
showLegend (boolean): Shows the legend near the chart. The default value is true.
legendPosition (constant): Sets the legend position. The default value is chartXkcd.config.positionType.upLeft.
dataColors (array): Sets colors for each dataset.
fontFamily (string): Sets the chart font family.
unxkcdify (boolean): Turns off the sketch-style effect. The default value is false.
strokeColor (string): Sets the stroke color. The default value is black.
backgroundColor (string): Sets the chart background color. The default value is white.

XY chart options:

xTickCount (number): Sets the number of x-axis ticks. The default value is 3.
yTickCount (number): Sets the number of y-axis ticks. The default value is 3.
showLegend (boolean): Shows the legend near the chart. The default value is true.
legendPosition (constant): Sets the legend position. The default value is chartXkcd.config.positionType.upLeft.
showLine (boolean): Connects XY points with lines. The default value is false.
timeFormat (string): Formats time-based x values.
dotSize (number): Sets the point size. The default value is 1.
dataColors (array): Sets colors for each dataset.
fontFamily (string): Sets the chart font family.
unxkcdify (boolean): Turns off the sketch-style effect. The default value is false.
strokeColor (string): Sets the stroke color. The default value is black.
backgroundColor (string): Sets the chart background color. The default value is white.

Bar chart options:

yTickCount (number): Sets the number of y-axis ticks.
dataColors (array): Sets colors for each dataset or bar group.
fontFamily (string): Sets the chart font family.
unxkcdify (boolean): Turns off the sketch-style effect. The default value is false.
strokeColor (string): Sets the stroke color. The default value is black.
backgroundColor (string): Sets the chart background color. The default value is white.

Stacked bar chart options:

yTickCount (number): Sets the number of y-axis ticks.
dataColors (array): Sets colors for stacked datasets.
fontFamily (string): Sets the chart font family.
unxkcdify (boolean): Turns off the sketch-style effect. The default value is false.
strokeColor (string): Sets the stroke color. The default value is black.
backgroundColor (string): Sets the chart background color. The default value is white.
showLegend (boolean): Shows the legend near the chart. The default value is true.
legendPosition (constant): Sets the legend position. The default value is chartXkcd.config.positionType.upLeft.

Pie and doughnut chart options:

innerRadius (number): Sets the empty center radius. The default value is 0.5. Use 0 for a pie chart.
showLegend (boolean): Shows the legend near the chart. The default value is true.
legendPosition (constant): Sets the legend position. The default value is chartXkcd.config.positionType.upLeft.
dataColors (array): Sets colors for each segment.
fontFamily (string): Sets the chart font family.
unxkcdify (boolean): Turns off the sketch-style effect. The default value is false.
strokeColor (string): Sets the stroke color. The default value is black.
backgroundColor (string): Sets the chart background color. The default value is white.

Radar chart options:

showLabels (boolean): Shows labels near each radar line. The default value is false.
ticksCount (number): Sets the number of ticks on the main line. The default value is 3.
dotSize (number): Sets the point size. The default value is 1.
showLegend (boolean): Shows the legend near the chart. The default value is false.
legendPosition (constant): Sets the legend position. The default value is chartXkcd.config.positionType.upLeft.
dataColors (array): Sets colors for each dataset.
fontFamily (string): Sets the chart font family.
unxkcdify (boolean): Turns off the sketch-style effect. The default value is false.
strokeColor (string): Sets the stroke color. The default value is black.
backgroundColor (string): Sets the chart background color. The default value is white.

Combined chart options:

yTickCount (number): Sets the number of y-axis ticks. The default value is 3.
showLegend (boolean): Shows the legend near the chart. The default value is true.
legendPosition (constant): Sets the legend position. The default value is chartXkcd.config.positionType.upLeft.
dataColors (array): Sets colors for each dataset.
fontFamily (string): Sets the chart font family.
unxkcdify (boolean): Turns off the sketch-style effect. The default value is false.
strokeColor (string): Sets the stroke color. The default value is black.
backgroundColor (string): Sets the chart background color. The default value is white.

API Methods

chart.xkcd does not document custom instance methods in the public reference. Chart creation uses constructors for each chart type.

// Render a line chart.
new chartXkcd.Line(svgElement, chartConfig);
// Render an XY scatter or XY line chart.
new chartXkcd.XY(svgElement, chartConfig);
// Render a vertical bar chart.
new chartXkcd.Bar(svgElement, chartConfig);
// Render a stacked bar chart.
new chartXkcd.StackedBar(svgElement, chartConfig);
// Render a pie or doughnut chart.
new chartXkcd.Pie(svgElement, chartConfig);
// Render a radar chart.
new chartXkcd.Radar(svgElement, chartConfig);
// Render a mixed bar and line chart.
new chartXkcd.Combined(svgElement, chartConfig);

Alternatives:

FAQs:

Q: Does chart.xkcd need Canvas?
A: No. chart.xkcd renders charts inside an SVG element.

Q: Why does my chart not appear?
A: Check that the SVG selector returns an element before the constructor runs. Also confirm that the CDN script loads before your chart initialization code.

Q: How do I create a pie chart instead of a doughnut chart?
A: Use the pie chart constructor and set innerRadius to 0 in the options object.

Q: Can I update the chart data without destroying and recreating it?
A: No. The library does not support live data updates. To show new data, clear the SVG container and create a new chart instance with the updated dataset.

Q: How do I change the chart size?
A: Set the width and height attributes directly on the <svg> element, or control them via CSS. The chart scales to fit the SVG bounding box.

Changelog:

v2.0.12 (06/16/2026)

Update

v1.1 (09/05/2019)

Allows to customize the font family and data color

Hand-drawn Style SVG Chart Library – chart.xkcd