Anychart Labels being cut off if they are positioned on the first and last point on my line chart

Question

I have a spline chart which needs to fully cover the container (so first and last points are on the edge of the div) however I have some code showing the scores via labels on the lowest and highest point on the chart. the porblem I have occurs if the smallest or highest points are either on the first or last point of the chat as they cut off. I need a way to position the labels on the first and last points differently. Beloww is a screenshot of my issue and my code.

    /******** TREND ********/
//create a chart
var chart = anychart.area();
// create a spline area series and set the data
var series = chart.splineArea(dataArray);
series.connectMissingPoints(false);
var fill = {
    keys: ["#57BEB7", "white"], // Define colors for the gradient
    angle: 270 // Set the angle of the gradient
};
series.fill(fill);
series.stroke("#57BEB7")
// labels
series.labels(true);
series.labels().format(function() {
    if (this.value === {{.Chart.HighestValue}} && !highestValAdded) {
        highestValAdded = true
        if ({{.Chart.HighestValue}} == {{.Chart.LowestValue}}){
            lowestValAdded = true
        }
        return this.value + "%";
    } else if (this.value === {{.Chart.LowestValue}} && !lowestValAdded) {
        lowestValAdded = true
        return this.value + "%";
    }
    return "";
});
series.labels().position("center-top");
series.labels().anchor("top");
series.labels().offsetX(5);
series.labels().fontColor("#55565A");
series.labels().fontWeight(600);
// set the chart title
chart.title().enabled(false);
// set the titles of the axes
var xAxis = chart.xAxis();
xAxis.enabled(false);
var yAxis = chart.yAxis();
yAxis.enabled(false);
chart.xScale().mode('continuous');
// grid
chart.xGrid().enabled(true);
chart.xGrid().stroke("#f0f0ef");
// tooltip
chart.tooltip().format((d) => {
    return `Score: ${d.value}%`
});
chart.tooltip().allowLeaveStage(true);
var interactivity = chart.interactivity();
interactivity.selectionMode("none");
var margin = chart.margin();
var padding = chart.padding();

series.markers()
    .type('circle')
    .size(1)
    .fill("#57BEB7")
    .stroke("none");

margin.left(0);
margin.right(0);
    margin.bottom(0);
    margin.top(0);
padding.left(0);
padding.right(0);
padding.bottom(0);
padding.top(0);
// set the container id
chart.container("chart-{{ .CardId }}");
// initiate drawing the chart
chart.draw();`