02-getting-started.md

title
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.

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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