06-bar.md

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

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

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)