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

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