back to listing index

timqian/chart.xkcd

[web search]
Original source (github.com)
Tags: charting graphing nodejs xkcd
Clipped on: 2019-08-19

Skip to content
xkcd styled chart lib https://timqian.com/chart.xkcd/
JavaScript
Branch: master
New pull request
Clone or download
Image (Asset 3/4) alt= .github Create FUNDING.yml 9 hours ago assets add font 11 days ago docs update doc 12 hours ago examples/script-tag update head img 11 hours ago src v1.0.1 14 hours ago .babelrc v1.0.1 14 hours ago .gitignore v1.0.1 14 hours ago .npmignore v1.0.1 14 hours ago LICENSE add license 7 hours ago package-lock.json update doc 12 hours ago package.json update doc 12 hours ago readme.md Update readme.md 34 minutes ago

readme.md

Image (Asset 4/4) alt=About

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

Check out the documentation for more instructions and links, or try out the examples, or chat with us in Slack

Quick start

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.

Preview and edit on codepen

<svg class="line-chart"></svg>
<script src="https://github.com/timqian/chart.xkcd/releases/download/1.0.1/chart.xkcd.js"></script>
<script>
  const svg = document.querySelector('.line-chart')

  new chartXkcd.Line(svg, {
    title: 'Monthly income of an indie developer',
    xLabel: 'Month',
    yLabel: '$ Dollors',
    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],
      }]
    },
  });
</script>