<svg class="bar-chart"></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
  const svg = document.querySelector('.bar-chart')
  
const barChart = new chartXkcd.Bar(svg, {
  title: 'SONICMOOVの男女比', // optional
  // xLabel: '', // optional
  // yLabel: '', // optional
  data: {
    labels: ['男性', '女性'],
    datasets: [{
      data: [64, 36],
    }],
  },
  options: { // optional
    yTickCount: 2,
    dataColors: ['#0089fd', '#e4007f'] // 色の指定
  },
});

</script>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.