How can I remove the margin of a chart in vue-apexcharts

I have a bar chart that looks like this:

And I want to make it look like this:

I managed to remove the labels, set the correct column width, column radius, color and so on, but the position and spacing are quite odd…

As you can see, there is a big margin around the chart, and it does not fit 100% the width nor it has the correct height, even with the chart.height and chart.width options set

This is my chart component:

<script setup lang="ts">
import BaseCard from '~/shared/components/molecules/BaseCard.vue'
import { CardType } from '~/shared/components/molecules/BaseCardProps'
import { useCurrencyFormatter } from '~/shared/composables/useCurrency'
import { addMoney, type Money } from '~/shared/models/Money'

const props = defineProps<{
  title: string,
  dataSeries: number[]
}>()
const chartOptions = {
  dataLabels: {
    enabled: false
  },
  chart: {
    toolbar: {
      show: false
    },
    zoom: {
      enabled: false
    },
    height: '32px',
    width: '100%'
  },
  colors: ['var(--color-bg-brand-primary)'],
  plotOptions: {
    bar: {
      columnWidth: 4,
      borderRadius: 1
    }
  },
  legend: {
    show: false
  },
  grid: {
    padding: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    yaxis: {
      lines: {
        show: false
      }
    },
    xaxis: {
      lines: {
        show: false
      }
    }
  },
  yaxis: {
    labels: {
      show: false
    }
  },
  xaxis: {
    labels: {
      show: false
    },
    axisBorder: {
      show: false
    },
    axisTicks: {
      show: false
    }
  }
}
const series = [
  {
    data: props.dataSeries
  }
]

const total = computed<Money>(() => {
  return props.dataSeries.map((value) => { return { amount: value, currency: 'BRL' } }).reduce((acc, current) => addMoney(acc, current) ?? acc, { amount: 0, currency: 'BRL' })
})
</script>

<template>
  <BaseCard class="chart-card" :type="CardType.Elevated">
    <div class="title-small color-text-default">
      {{ props.title }}
    </div>
    <div class="headline6-strong color-text-default">
      {{ useCurrencyFormatter(total) }}
    </div>
    <apexchart
      type="bar"
      :options="chartOptions"
      :series="series"
    />
  </BaseCard>
</template>

<style lang="scss" scoped>
.chart-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

</style>