Lower axis ticks are hidden

bug.html

<script type="module">
  import { ref, createApp } from 'https://cdn.skypack.dev/vue@3.0.11/dist/vue.esm-browser.js'
  // import { ref, createApp } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.11/vue.esm-browser.js'
  import { Chart, Line, Responsive } from 'https://cdn.skypack.dev/vue3-charts';
  // @ts-ignore
  const locale = new Intl.Locale("en-IN", {
    firstDayOfWeek: "mon",
    hourCycle: "h24",
    calendar: "gregory"
  });

  const formatDate = new Intl.DateTimeFormat(locale).format;

  const App = {
    name: "Device",
    components: {
      Chart,
      // Grid,
      Line,
      Responsive
    },
    setup() {
      const axis = ref({
        primary: {
          domain: [
            new Date("2021-05-01T12:40:22.470Z").valueOf(),
            new Date().valueOf()
          ],
          type: "linear",
          format(/** @type {number} */ val) {
            return formatDate(new Date(val));
          }
          // ticks: 4
        },
        secondary: {
          domain: [0, "dataMax + 100"],
          type: "linear",
          ticks: 8
        }
      });

      const history = ref(
        [
          {
            date: new Date("2021-05-10T12:40:22.470Z").valueOf(),
            pl: 3100,
            avg: 1300,
            inc: 700
          },
          {
            date: new Date("2021-05-09T12:40:22.470Z").valueOf(),
            pl: 200,
            avg: 100,
            inc: 200
          },
          {
            date: new Date("2021-05-08T12:40:22.470Z").valueOf(),
            pl: 600,
            avg: 400,
            inc: 300
          },
          {
            date: new Date("2021-05-07T12:40:22.470Z").valueOf(),
            pl: 500,
            avg: 90,
            inc: 100
          },
          {
            date: new Date("2021-05-06T12:40:22.470Z").valueOf(),
            pl: 1000,
            avg: 500,
            inc: 300
          },
          {
            date: new Date("2021-05-05T12:40:22.470Z").valueOf(),
            pl: 2000,
            avg: 900,
            inc: 400
          },
          {
            date: new Date("2021-05-04T12:40:22.470Z").valueOf(),
            pl: 400,
            avg: 400,
            inc: 500
          },
          {
            date: new Date("2021-05-03T12:40:22.470Z").valueOf(),
            pl: 3100,
            avg: 1300,
            inc: 700
          },
          {
            date: new Date("2021-05-02T12:40:22.470Z").valueOf(),
            pl: 200,
            avg: 100,
            inc: 200
          },
          {
            date: new Date("2021-05-01T12:40:22.470Z").valueOf(),
            pl: 600,
            avg: 400,
            inc: 300
          },
          {
            date: new Date("2021-04-30T12:40:22.470Z").valueOf(),
            pl: 500,
            avg: 90,
            inc: 100
          },
          {
            date: new Date("2021-04-29T12:40:22.470Z").valueOf(),
            pl: 1000,
            avg: 500,
            inc: 300
          },
          {
            date: new Date("2021-04-28T12:40:22.470Z").valueOf(),
            pl: 2000,
            avg: 900,
            inc: 400
          },
          {
            date: new Date("2021-04-27T12:40:22.470Z").valueOf(),
            pl: 400,
            avg: 400,
            inc: 500
          },
          {
            date: new Date("2021-04-26T12:40:22.470Z").valueOf(),
            pl: 3100,
            avg: 1300,
            inc: 700
          },
          {
            date: new Date("2021-04-25T12:40:22.470Z").valueOf(),
            pl: 200,
            avg: 100,
            inc: 200
          },
          {
            date: new Date("2021-04-24T12:40:22.470Z").valueOf(),
            pl: 600,
            avg: 400,
            inc: 300
          },
          {
            date: new Date("2021-04-23T12:40:22.470Z").valueOf(),
            pl: 400,
            avg: 400,
            inc: 500
          },
          {
            date: new Date("2021-04-22T12:40:22.470Z").valueOf(),
            pl: 3100,
            avg: 1300,
            inc: 700
          },
          {
            date: new Date("2021-04-21T12:40:22.470Z").valueOf(),
            pl: 200,
            avg: 100,
            inc: 200
          },
          {
            date: new Date("2021-04-20T12:40:22.470Z").valueOf(),
            pl: 600,
            avg: 400,
            inc: 300
          },
          {
            date: new Date("2021-04-19T12:40:22.470Z").valueOf(),
            pl: 500,
            avg: 90,
            inc: 100
          },
          {
            date: new Date("2021-04-18T12:40:22.470Z").valueOf(),
            pl: 1000,
            avg: 500,
            inc: 300
          },
          {
            date: new Date("2021-04-17T12:40:22.470Z").valueOf(),
            pl: 2000,
            avg: 900,
            inc: 400
          },
          {
            date: new Date("2021-04-16T12:40:22.470Z").valueOf(),
            pl: 400,
            avg: 400,
            inc: 500
          },
          {
            date: new Date("2021-04-15T12:40:22.470Z").valueOf(),
            pl: 3100,
            avg: 1300,
            inc: 700
          },
          {
            date: new Date("2021-04-14T12:40:22.470Z").valueOf(),
            pl: 200,
            avg: 100,
            inc: 200
          }
        ].reverse()
      );

      return {
        history,
        axis
      };
    },
    data() {
      return {
        chart: true,
        zoom: 2
      };
    },
    template:
      '<header>header</header>\r\n <nav>nav</nav>\r\n <div id="device">\r\n <div id="first-row">\r\n <h2>Device</h2>\r\n <div id="controls">\r\n <button class="round-corners-input">\r\n Sync\r\n </button><br><button class="round-corners-input">\r\n Upload\r\n </button><br><button class="round-corners-input">\r\n Deactivate\r\n </button>\r\n </div>\r\n </div>\r\n <div id="second-row">\r\n <h4 id="history-title">\r\n {{ chart?\'14-Day History\':\'Table\' }}\r\n </h4>\r\n <h4 id="map-title">\r\n Location\r\n </h4>\r\n <Responsive\r\n id="graph"\r\n style="border: 1px solid red"\r\n >\r\n <template #main="{ width, height }">\r\n <Chart\r\n :axis="axis"\r\n :size="{ width, height }"\r\n :data="history"\r\n direction="horizontal"\r\n >\r\n <!-- <template #widgets>\r\n <Tooltip\r\n border-color="#48CAE4"\r\n :config="{\r\n name: { hide: true },\r\n pl: { color: \'#0077b6\' },\r\n avg: { label: \'average\', color: \'red\' },\r\n inc: { hide: true }\r\n }"\r\n />\r\n </template> -->\r\n <template #layers>\r\n <!-- <Grid stroke-dasharray="2,2" /> -->\r\n <Line\r\n :data-keys="[\'date\', \'pl\']"\r\n type="natural"\r\n />\r\n <Line\r\n :data-keys="[\'date\', \'avg\']"\r\n :line-style="{ stroke: \'red\' }"\r\n type="natural"\r\n />\r\n </template>\r\n </Chart>\r\n </template>\r\n </Responsive>\r\n <span\r\n id="switch"\r\n class="uiLink cursorPointer"\r\n @click="chart=!chart"\r\n >{{ chart?\'Table\':\'History\' }}</span>\r\n <span\r\n id="export"\r\n class="uiLink cursorPointer"\r\n >Export</span>\r\n </div>\r\n </div>'
  };

  createApp(App).mount(document.body);
</script>
<style>
  :root {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-kerning: normal;
    font-optical-sizing: auto;
    --accent: #293b62;
    --bgfill: #e6e5e5;
    --novomoto-crimson: #c00000;
    --novomoto-yellow: #fcd871;
    --margin: calc(100% / 2 - 40rem);
    --root-paddings: 0 var(--margin);
    margin: 0;
    user-select: none;
  }

  body {
    margin: 0;
  }

  :any-link {
    color: inherit;
  }

  .round-corners-input {
    line-height: 2.5;
    border-radius: 2rem;
    padding: 0 1rem;
    font-size: 1.25rem;
    border: 1px solid;
    color: inherit;
    background: var(--bgfill);
  }

  .cursorPointer {
    cursor: pointer;
  }

  .cursorPointer:hover {
    text-decoration: underline;
    filter: brightness(1.2);
  }

  .cursorPointer:active {
    filter: brightness(1.5);
  }

  .uiLink {
    font-weight: bold;
    text-decoration: underline;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--accent);
  }

  body {
    display: grid;
    grid-template:
      [header-left] "header header"7rem [header-right] [nav-left] "nav nav"2.8rem [nav-right] [sidebar] "sidebar container"minmax(0, auto) [container] / 20rem auto;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  body>header {
    grid-area: header;
    background: #293b62;
  }

  body>nav {
    grid-area: nav;
    background: #fcd871;
  }

  #first-row {
    height: 50%;
    display: grid;
    grid-template:
      [row1-start] "device-nav device-title device-title device-title device-title ."min-content[row1-end] [row2-start] "device-nav controls . . . ."1fr[row2-end] / var(--margin) 0.375fr 1fr 1fr 1fr var(--margin);
  }

  #second-row {
    height: 50%;
    display: grid;
    grid-template:
      [row1-start] ". history-title history-title map-title"min-content [row1-end] [row2-start] ". graph graph map"minmax(0, auto) [row2-end] [row3-start] ". switch export map"3em [row3-end] / var(--margin) 1fr 1fr 1fr;
  }

  #history-title {
    grid-area: history-title;
    margin-left: var(--margin);
  }

  #map-title {
    grid-area: map-title;
  }

  #graph {
    grid-area: graph;
    /* height: 100%; */
    /* width: auto; */
  }

  #map {
    grid-area: map;
  }

  #switch {
    grid-area: switch;
  }

  #export {
    grid-area: export;
  }

  #switch,
  #export {
    align-self: center;
  }

  table {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    font-size: 1.5rem;
    border: 1px solid;
    grid-row: row2-start;
    margin: 0 1.5em;
  }

  table:nth-of-type(1) th {
    background: var(--bgfill);
  }

  table:nth-of-type(2) th {
    background: var(--novomoto-yellow);
  }

  table:nth-of-type(3) th {
    background: var(--accent);
    color: white;
    border-color: black;
  }

  th,
  td {
    border: 1px solid;
    padding: 0.25em 0.5em;
  }

  #device {
    grid-column: sidebar / container;
  }

  #controls {
    grid-area: controls;
  }

  #controls>button {
    line-height: 1.75;
    margin-bottom: 1.375em;
    border: none;
    font-weight: bold;
  }

  #controls>button:nth-of-type(1) {
    background: var(--novomoto-yellow);
  }

  #controls>button:nth-of-type(2) {
    background: #f38d00;
  }

  #controls>button:nth-of-type(3) {
    color: white;
    background: red;
  }

  nav {
    grid-area: device-nav;
    font-size: 1.65em;
    font-weight: bold;
    padding: 0.75em 2.5em;
    line-height: 2.7;
    color: var(--accent);
    background: #293b62;
  }

  h2 {
    font-size: 2em;
    line-height: 1;
    grid-area: device-title;
  }

  button {
    width: 100%;
  }

</style>