Xaxis tick off placement

[Sleeeze]

So i have this apexchart its a line chart and on the xaxis the tick show the last 30 Min in 5 min intervall (atleast thats intendet).

The problem is that the last tick is completely off the place. Following a screenshot:

https://i.stack.imgur.com/VUSh4.png

As you can see the last tick is not in his right place.

I am using vue3 with laravel and bootstrap and this is my vue file:

<template>
    <div>
      <apexchart type="area" :options="chartOptions" :series="series"></apexchart>
    </div>
  </template>
  
  <script>
  import VueApexCharts from 'vue3-apexcharts'
  
  export default {
    name: "Chart",
    components: {
      apexchart: VueApexCharts
    },
    data() {
      let now = new Date();
      let halfHourAgo = new Date(now.getTime() - (0.5*60*60*1000)).getTime(); // Half an hour ago
  
      // Generate data for every 5 minutes
      let data = [];
      for(let i = 0; i <= 6; i++) {
        data.push({
          x: new Date(halfHourAgo + i * 5 * 60 * 1000).getTime(),
          y: Math.floor(Math.random() * 100) // Random data, replace with your data
        });
      }
  
      return {
        series: [{
          name: 'Network',
          data: data
        }],
        chartOptions: {
          chart: {
            height: 350,
            type: 'area',
            zoom: {
              enabled: false
            },
            toolbar: {
              show: false
            }
          },
          dataLabels: {
            enabled: false
          },
          stroke: {
            curve: 'smooth'
          },
          xaxis: {
                type: 'datetime',
                tickPlacement: 'between',
                min: halfHourAgo,
                max: now.getTime() - (0.5 * 60 * 1000),  // Subtracting half an hour from the max value
                labels: {
                    show: true,
                    rotate: -45,
                    rotateAlways: false,
                    hideOverlappingLabels: false,
                    showDuplicates: false,
                    trim: true,
                    minHeight: undefined,
                    maxHeight: undefined,
                    datetimeUTC: false,
                    datetimeFormatter: {
                        minute: 'HH:mm'
                    }
                }
            },
          yaxis: {
            opposite: false
          },
          legend: {
            horizontalAlign: 'left'
          }
        }
      };
    }
  };
  </script>
  
  <style scoped>

It seems like the problem is on bootstrap side because when i deactivate my whole css file it works but i can't figure where exactly.

Here is how i implement the html part:

<!-- Line Chart -->
    <div class="col-5">
      <div class="card shadow mb-4 border-left-card-dash"> 
        <!-- Card Header - Dropdown -->
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
          <h6 class="m-0 font-weight-bold users">Visits Overview</h6>
          <div class="dropdown no-arrow"> <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i></a>
            <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
              <div class="dropdown-header">Dropdown Header:</div>
              <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a></div>
          </div>
        </div>
        <!-- Card Body -->
        <div class="card-body text-center">
            <div class="rt-card-header-pers">In last 5 minutes</div>
            <div class="rt-card-main-pers">26</div>
            <div class="rt-card-last-pers">active users</div>
            <div id="realtimelinechart" style="width:100%"></div>
        </div>
      </div>
    </div>

The Chart is included in the <div id="realtimelinechart".

And following the whole output that is generated by Apexcharts itself for the xaxis ticks part:

<g id="SvgjsG1230" class="apexcharts-xaxis" transform="translate(0, 0)">
  <g id="SvgjsG1231" class="apexcharts-xaxis-texts-g" transform="translate(0, -4)">
    <text id="SvgjsText1233" font-family="Helvetica, Arial, sans-serif" x="50.84056586334745" y="270.92670807453413" text-anchor="middle" dominant-baseline="auto" font-size="12px" font-weight="400" fill="#373d3f" class="apexcharts-text apexcharts-xaxis-label " style="font-family: Helvetica, Arial, sans-serif;">
      <tspan id="SvgjsTspan1234">07:10</tspan>
      <title>07:10</title>
    </text>
    <text id="SvgjsText1236" font-family="Helvetica, Arial, sans-serif" x="124.33897688029658" y="270.92670807453413" text-anchor="middle" dominant-baseline="auto" font-size="12px" font-weight="400" fill="#373d3f" class="apexcharts-text apexcharts-xaxis-label " style="font-family: Helvetica, Arial, sans-serif;">
      <tspan id="SvgjsTspan1237">07:15</tspan>
      <title>07:15</title>
    </text>
    <text id="SvgjsText1239" font-family="Helvetica, Arial, sans-serif" x="197.83738789724578" y="270.92670807453413" text-anchor="middle" dominant-baseline="auto" font-size="12px" font-weight="400" fill="#373d3f" class="apexcharts-text apexcharts-xaxis-label " style="font-family: Helvetica, Arial, sans-serif;">
      <tspan id="SvgjsTspan1240">07:20</tspan>
      <title>07:20</title>
    </text>
    <text id="SvgjsText1242" font-family="Helvetica, Arial, sans-serif" x="271.335798914195" y="270.92670807453413" text-anchor="middle" dominant-baseline="auto" font-size="12px" font-weight="400" fill="#373d3f" class="apexcharts-text apexcharts-xaxis-label " style="font-family: Helvetica, Arial, sans-serif;">
      <tspan id="SvgjsTspan1243">07:25</tspan>
      <title>07:25</title>
    </text>
    <text id="SvgjsText1245" font-family="Helvetica, Arial, sans-serif" x="344.8342099311442" y="270.92670807453413" text-anchor="middle" dominant-baseline="auto" font-size="12px" font-weight="400" fill="#373d3f" class="apexcharts-text apexcharts-xaxis-label " style="font-family: Helvetica, Arial, sans-serif;">
      <tspan id="SvgjsTspan1246">07:30</tspan>
      <title>07:30</title>
    </text>
    <text id="SvgjsText1248" font-family="Helvetica, Arial, sans-serif" x="418.3326209480934" y="270.92670807453413" text-anchor="middle" dominant-baseline="auto" font-size="12px" font-weight="400" fill="#373d3f" class="apexcharts-text apexcharts-xaxis-label " style="font-family: Helvetica, Arial, sans-serif;">
      <tspan id="SvgjsTspan1249">07:35</tspan>
      <title>07:35</title>
    </text>
  </g>
</g>

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.