Spline area chart set border radius

[ItsNotExist]

How can the corners of a spline area chart be rounded, because a border raidus on the SVG of the chart leaves a small corner despite rounding, because it does not round 100% cleanly, for whatever reason. Furthermore I had to set an offsetY because the chart was not at the bottom of my div although no margin or padding was set in the parent div as well as the chart div, it almost looks like the axisborder is still displayed but invisible due to the sparkline setting. Important is the border-radius! Can someone help me?

CSS:
`.charts-container {
display: flex;
flex-direction: row;
gap: 5rem;

padding: 2rem;

width: 100%;

}

.charts-box {
border-radius: 10px;
background-color: var(--secondary-color);

width: 500px;
height: 250px;

}`

HTML:
`

            <div class="charts-box">
                <div id="filament-chart"></div>
            </div>
        </div>

`

JS:
`var options = {
series: [
{
name: 'Hotend - 1',
data: [31, 40, 28, 51, 42, 109, 100]
},

    {
        name: 'Hotend - 2',
        data: [11, 32, 45, 32, 34, 52, 41]
    }
],

chart: {
    type: 'area',
    width: '100%',
    height: '100%',
    offsetY: 2,
    sparkline: {
        enabled: true
    }
},

grid: {
    padding: {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
    }
},

legend: {
    show: true,

    position: 'top',
    horizontalAlign: 'left',

    offsetX: -23,
    offsetY: -10,

    itemMargin: {
        horizontal: 10,
        vertical: 0
    },

    markers: {
        offsetX: -5,
        offsetY: 0,
    }
},

title: {
    text: 'Temperature | Hotends',
    align: 'left'
},

stroke: {
    curve: 'smooth'
},

xaxis: {
    type: 'datetime',
    categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
},

tooltip: {
    x: {
        format: 'dd/MM/yy HH:mm'
    },
},

};`