<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <script src="../dist/index.dev.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="chart" style="width: 50%; height: 500px;"></div>
    <script type="text/javascript">
      const startTime = 1590590148;
      const data = Array.from(
        { length: 20 },
        (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 30)]
      );
      let options = {
        renderLegend: false, usePanning: false,
        axis: { y: { range: [0, 50] } },
        zoomEvents: { mouse: { 
          zoom: { isActive: false },
          pan: { isActive: false },
        } },
        eventsCallbacks: { mouseClick: console.log }
      }
      var pod = new LinePod(
        document.getElementById('chart'),
        [{ datapoints: data }],
        options
      );
      pod.render();
    </script>
  </body>
</html>