Apex Charts JS fill to size

So I've got a pretty small div, in which I gotta get a small timeline chart shoved in. The current problem is, that due to the chart being perfectly centered, I have a lot of whitespace I could really use, to make the actual data and chart much larger.:

I think showing the parent div shouldn't matter(because changing around these sizes doesn't really affect the chart itself). It feels like there's some option in the configuration that I'm missing. I've tried setting offsetY and even offsetX to negative values, because I was desperate, but to no avail.

<html>
    <div id="chartTarget" style="height: 100; width: 100%;">
        <canvas id="chartCanvas" height="100"></canvas>
        <div style="opacity:0;" class="chartTooltip center">
        </div>
    </div>
</html>

Relevant code is pretty much straight up copied from the example, but since I'm bound to get questions about it, here goes:

var options = {
                series: [
                    {
                        name: 'Pending',
                        data: [
                            {
                                x: 'Trip',
                                y: [
                                    new Date('2021-04-21T03:24:00').getTime(),
                                    new Date('2021-04-21T04:24:00').getTime()
                                ]
                            }
                        ]
                    },
                    {
                        name: 'Active',
                        data: [
                            {
                                x: 'Trip',
                                y: [
                                    new Date('2021-04-21T05:24:00').getTime(),
                                    new Date('2021-04-21T08:24:00').getTime()
                                ]
                            }
                        ]
                    },
                    {
                        name: 'Deleted',
                        data: [
                            {
                                x: 'Trip',
                                y: [
                                    new Date('2021-04-21T11:24:00').getTime(),
                                    new Date('2021-04-21T12:24:00').getTime()
                                ]
                            }
                        ]
                    }
                ],
                chart: {
                    height: 75,
                    width: 250,
                    type: 'rangeBar',
                    offsetY: -25,
                    toolbar: {
                        show: false,
                        tools: {
                            download: false,
                            selection: false,
                            zoom: false,
                            zoomin: false,
                            zoomout: false,
                            pan: true,
                            reset: true
                        }
                    },
                    events: {
                        dataPointMouseEnter: function (event, chartContext, config) {
                            config.w.config.chart.toolbar.show = false;
                        },
                        dataPointMouseLeave: function (event, chartContext, config) {
                            config.w.config.chart.toolbar.show = false;
                        }
                    }
                },
                plotOptions: {
                    bar: {
                        horizontal: true,
                        barHeight: '50%',
                        rangeBarGroupRows: true
                    }
                },
                colors: [
                    "#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0",
                    "#3F51B5", "#546E7A", "#D4526E", "#8D5B4C", "#F86624",
                    "#D7263D", "#1B998B", "#2E294E", "#F46036", "#E2C044"
                ],
                fill: {
                    type: 'solid'
                },
                xaxis: {
                    type: 'datetime',
                    labels: {
                        maxHeight: 25,
                        style: {
                            fontSize: '9px'
                        },
                        offsetY: -8

                    },
                    tooltip: {
                        enabled: false
                    }
                },
                yaxis: {
                    show: false,
                    lines: {
                        show: true
                    }
                },
                legend: {
                    show: false,
                    position: 'top'
                }
            };

            var chart = new ApexCharts(document.querySelector("#chartTarget"), options);
            chart.render();

I need the label, so things like sparkline aren't useful.

Solution

A negative offset at the chart level seems to have fixed for my needs.

chart.offsetY: -25

I assume everyone else can play with negative offset values, where available for more fine tuning.