Introduction

Chart.xkcd is a chart library plots “sketchy”, “cartoony” or “hand-drawn” styled charts.

Sponsors

Madao | Become a sponsor

Getting started

It’s easy to get started with chart.xkcd. All that’s required is the script included in your page along with a single <svg> node to render the chart.

In the following example we create a line chart.

See the Pen chart.xkcd example by timqian (@timqian) on CodePen.

JS part of the example

  const svg = document.querySelector('.line-chart')
  new chartXkcd.Line(svg, {
    title: '',
    xLabel: '',
    yLabel: '',
    data: {...},
    options: {},
  });

Parameters description

• title: optional title of the chart
• xLabel: optional x label of the chart
• yLabel: optional y label of the chart
• data: the data you want to visulize
• options: optional configurations to customize how the chart looks

Installation

You can install chart.xkcd via script tag in HTML or via npm

Via Script Tag

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.xkcd.min.js" integrity="sha256-NkH6G4XRcQ5Bsfs7O6yh9mw1SJLEOJWCtWqko6VjF34=" crossorigin="anonymous"></script>
<script>
    const myChart = new chartXkcd.Line(svg, {...});
</script>

Via npm

Install

npm i chart.xkcd

Usage

import chartXkcd from 'chart.xkcd';
const myChart = new chartXkcd.Line(svg, {...});

Other ways

• React wrapper: chart.xkcd-react
  
• Vue wrapper:
  • chart.xkcd-vue
  • chart.xkcd-vue-wrapper

Line chart

Line chart displays series of data points in the form of lines. It can be used to show trend data, or comparison of different data sets.

See the Pen chart.xkcd example by timqian (@timqian) on CodePen.

JS part

const lineChart = new chartXkcd.Line(svg, {
  title: 'Monthly income of an indie developer', // optional
  xLabel: 'Month', // optional
  yLabel: '$ Dollars', // optional
  data: {
    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
    datasets: [{
      label: 'Plan',
      data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000],
    }, {
      label: 'Reality',
      data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
    }],
  },
  options: { // optional
    yTickCount: 3,
    legendPosition: chartXkcd.config.positionType.upLeft
  }
})

Customize chart by defining options

• yTickCount: customize tick numbers you want to see on the y axis (default 3)
• showLegend: display legend near chart (default true)
• legendPosition: specify where you want to place the legend. (default chartXkcd.config.positionType.upLeft) Possible values:
  • up left: chartXkcd.config.positionType.upLeft
  • up right: chartXkcd.config.positionType.upRight
  • bottom left: chartXkcd.config.positionType.downLeft
  • bottom right: chartXkcd.config.positionType.downRight
• dataColors: array of colors for different datasets
• fontFamily: customize font family used in the chart
• unxkcdify: disable xkcd effect (default false)
• strokeColor: stroke colors (default black)
• backgroundColor: color for BG (default white)

XY chart

XY chart is used to plot points by specifying their XY coordinates.

You can also plot XY line chart by connecting the points.

See the Pen chart.xkcd XY by timqian (@timqian) on CodePen.

JS part

  const svg = document.querySelector('.xy-chart');

  new chartXkcd.XY(svg, {
    title: 'Pokemon farms', //optional
    xLabel: 'Coordinate', //optional
    yLabel: 'Count', //optional
    data: {
      datasets: [{
        label: 'Pikachu',
        data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 100 }, { x: 1, y: 2 }, { x: 2, y: 4 }],
      }, {
        label: 'Squirtle',
        data: [{ x: 3, y: 122 }, { x: 4, y: 212 }, { x: -3, y: 100 }, { x: 1, y: 1 }, { x: 1.5, y: 12 }],
      }],
    },
    options: { //optional
      xTickCount: 5,
      yTickCount: 5,
      legendPosition: chartXkcd.config.positionType.upRight,
      showLine: false,
      timeFormat: undefined,
      dotSize: 1,
    },
  });

Customize XY chart by defining options

• xTickCount: customize tick numbers you want to see on the x axis (default 3)
• yTickCount: customize tick numbers you want to see on the y axis (default 3)
• showLegend: display legend near chart (default true)
• legendPosition: specify where you want to place the legend (default chartXkcd.config.positionType.upLeft) Possible values:
  • up left: chartXkcd.config.positionType.upLeft
  • up right: chartXkcd.config.positionType.upLeft
  • bottom left: chartXkcd.config.positionType.downLeft
  • bottom right: chartXkcd.config.positionType.downRight
• showLine: connect the points with lines (default: false)
• timeFormat: specify the time format if the x values are time (default undefined) chart.xkcd use dayjs to format time, you can find the all the available formats here
• dotSize: you can change size of the dots if you want (default 1)
• dataColors: array of colors for different datasets
• fontFamily: customize font family used in the chart
• unxkcdify: disable xkcd effect (default false)
• strokeColor: stroke colors (default black)
• backgroundColor: color for BG (default white)

Another example of XY chart: XY line chart with timeFormat

See the Pen chart.xkcd XY line by timqian (@timqian) on CodePen.

Bar chart

A bar chart provides a way of showing data values represented as vertical bars

See the Pen chart.xkcd bar by timqian (@timqian) on CodePen.

JS part

const barChart = new chartXkcd.Bar(svg, {
  title: 'github stars VS patron number', // optional
  // xLabel: '', // optional
  // yLabel: '', // optional
  data: {
    labels: ['github stars', 'patrons'],
    datasets: [{
      data: [100, 2],
    }],
  },
  options: { // optional
    yTickCount: 2,
  },
});

Customize chart by defining options

• yTickCount: customize tick numbers you want to see on the y axis
• dataColors: array of colors for different datasets
• fontFamily: customize font family used in the chart
• unxkcdify: disable xkcd effect (default false)
• strokeColor: stroke colors (default black)
• backgroundColor: color for BG (default white)

Stacked bar chart

A stacked bar chart provides a way of showing data values represented as vertical bars

See the Pen chart.xkcd stacked bar by timqian (@timqian) on CodePen.

JS part

new chartXkcd.StackedBar(svg, {
  title: 'Issues and PR Submissions',
  xLabel: 'Month',
  yLabel: 'Count',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'April', 'May'],
    datasets: [{
      label: 'Issues',
      data: [12, 19, 11, 29, 17],
    }, {
      label: 'PRs',
      data: [3, 5, 2, 4, 1],
    }, {
      label: 'Merges',
      data: [2, 3, 0, 1, 1],
    }],
  },
});

Customize chart by defining options

• yTickCount: customize tick numbers you want to see on the y axis
• dataColors: array of colors for different datasets
• fontFamily: customize font family used in the chart
• unxkcdify: disable xkcd effect (default false)
• strokeColor: stroke colors (default black)
• backgroundColor: color for BG (default white)
• showLegend: display legend near chart (default true)
• legendPosition: specify where you want to place the legend (default chartXkcd.config.positionType.upLeft) Possible values:
  • up left: chartXkcd.config.positionType.upLeft
  • up right: chartXkcd.config.positionType.upLeft
  • bottom left: chartXkcd.config.positionType.downLeft
  • bottom right: chartXkcd.config.positionType.downRight

Pie/Doughnut chart

See the Pen chart.xkcd pie by timqian (@timqian) on CodePen.

JS part

const pieChart = new chartXkcd.Pie(svg, {
  title: 'What Tim is made of', // optional
  data: {
    labels: ['a', 'b', 'e', 'f', 'g'],
    datasets: [{
      data: [500, 200, 80, 90, 100],
    }],
  },
  options: { // optional
    innerRadius: 0.5,
    legendPosition: chartXkcd.config.positionType.upRight,
  },
});

Customize chart by defining options

• innerRadius: specify empty pie chart radius (default: 0.5)
  • Want a pie chart? set innerRadius to 0
• showLegend: display legend near chart (default true)
• legendPosition: specify where you want to place the legend. (default chartXkcd.config.positionType.upLeft) Possible values:
  • up left: chartXkcd.config.positionType.upLeft
  • up right: chartXkcd.config.positionType.upLeft
  • bottom left: chartXkcd.config.positionType.downLeft
  • bottom right: chartXkcd.config.positionType.downRight
• dataColors: array of colors for different datasets
• fontFamily: customize font family used in the chart
• unxkcdify: disable xkcd effect (default false)
• strokeColor: stroke colors (default black)
• backgroundColor: color for BG (default white)

Radar chart

See the Pen chart.xkcd radar by timqian (@timqian) on CodePen.

JS part

const radar = new chartXkcd.Radar(svg, {
  title: 'Letters in random words', // optional
  data: {
    labels: ['c', 'h', 'a', 'r', 't'],
    datasets: [{
      label: 'ccharrrt', // optional
      data: [2, 1, 1, 3, 1],
    }, {
      label: 'chhaart', // optional
      data: [1, 2, 2, 1, 1],
    }],
  },
  options: { // optional
    showLegend: true,
    dotSize: .8,
    showLabels: true,
    legendPosition: chartXkcd.config.positionType.upRight,
  },
});

Customize chart by defining options

• showLabels: display labels near every line (default false)
• ticksCount: customize tick numbers you want to see on the main line (default 3)
• dotSize: you can change size of the dots if you want (default 1)
• showLegend: display legend near chart (default false)
• legendPosition: specify where you want to place the legend. (default chartXkcd.config.positionType.upLeft) Possible values:
  • up left: chartXkcd.config.positionType.upLeft
  • up right: chartXkcd.config.positionType.upRight
  • bottom left: chartXkcd.config.positionType.downLeft
  • bottom right: chartXkcd.config.positionType.downRight
• dataColors: array of colors for different datasets
• fontFamily: customize font family used in the chart
• unxkcdify: disable xkcd effect (default false)
• strokeColor: stroke colors (default black)
• backgroundColor: color for BG (default white)