<svg class="xy-chart"></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
  const svg = document.querySelector('.xy-chart');

  new chartXkcd.XY(svg, {
    title: 'Pokemon farms', //optional
    xLabel: 'Coodinate', //optional
    yLabel: 'Count', //optional
    data: {
      datasets: [{
        label: 'Pikachu',
        data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 100 }, { x: 1, y: 2 }, { x: 2, y: 4 }],
      }, {
        label: 'Squirtle',
        data: [{ x: 3, y: 122 }, { x: 4, y: 212 }, { x: -3, y: 100 }, { x: 1, y: 1 }, { x: 1.5, y: 12 }],
      }],
    },
    options: { //optional
      xTickCount: 5,
      yTickCount: 5,
      legendPosition: chartXkcd.config.positionType.upRight,
      showLine: false,
      timeFormat: undefined,
      dotSize: 1,
    },
  });
</script>