07-stacked-bar.md

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

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

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