<!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">
      var pod = new ChartwerkBarPod(
        document.getElementById('chart'),
        [
          { target: 'test11', datapoints: getData(), matchedKey: 'm-1', color: 'red', colorFormatter: (data) => ['green', 'yellow'][data.rowIndex]  },
          // { target: 'test12', datapoints: [[100, 10], [200, 20], [300, 10]], matchedKey: 'm-1', color: 'green' },
          // { target: 'test21', datapoints: [[130, 10], [230, 26], [330, 15]], matchedKey: 'm-2', color: 'yellow'},
          // { target: 'test22', datapoints: [[130, 10], [230, 27], [330, 10]], matchedKey: 'm-2', color: 'blue' },
        ],
        {
          usePanning: false,
          axis: {
            x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; } },
            y: { format: 'custom', invert: false, range: [0, 30], valueFormatter: (value) => { return value + '%'; } }
          },
          stacked: false,
          matching: false,
          zoomEvents: {
            scroll: { zoom: { isActive: false },  pan: { isActive: false }  },
          },
          annotations: [
            { key: 'm-1', color: 'red' },
            { key: 'm-2', color: 'green' }
          ],
          eventsCallbacks: {
            zoomIn: (range) => { console.log('range', range) }
          },
          renderLegend: false,
        }
      );
      console.time('render');
      pod.render();
      console.timeEnd('render');

      function getData() {
        return [
          [0, 15], [1, 20], [2, 10],
        ];
      }
    </script>
  </body>
</html>

<style>
.overlay {
  fill: black;
}
</style>