chart2.html


<html>
    <head>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      <link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
    </head>
  <body>
     <div style="width: 800px; height: 600px; display: inline-block;">
<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: 'Contrbiutors with a documentation problem', // optional
  // xLabel: '', // optional
  yLabel: 'percentage of contributors', // optional
  data: {
    labels: ['have a problem', 'actually contribute'],
    datasets: [{
      data: [93, 40],
    }],
  },
  options: { // optional
    yTickCount: 4,
  },
});

</script>
</div>
</body>
</html>