Color the area below the line in a highchart

I need to modify a line chart (that I didn't create). The app extracts data from a database and order each element by hour before adding it to the chart. When you hover a point, the app look like this:

My task is to paint the below area with a different color (like an area chart):

This is the code that generates the chart:

var chart = Highcharts.stockChart('production-time-chart', {
    legend: {
        /*Not relevant (i think)*/
    },
    time: {
        timezoneOffset: new Date(Date.now()).getTimezoneOffset(),
    },
    rangeSelector: {
        buttonSpacing: 10,
        buttonTheme: {
            width: 120
        },
        inputDateFormat: '%H:%M:%S',
        buttons: /*Not relevant (i think)*/,
        selected: currentNavigatorButton,
    },
    chart: {
        type: 'areaspline',
        zoomType: 'xy',
        plotBorderWidth: 2,
        events: {
            click: () => clearPoints(),
            selection: function (e) {
                clearPoints();
                if (e.xAxis.length > 0 && e.yAxis.length > 0) {
                    var models = [];
                    var chartObj = this,
                        xMin = e.xAxis[0].min,
                        xMax = e.xAxis[0].max,
                        yMin = e.yAxis[0].min,
                        yMax = e.yAxis[0].max;

                    if (chartObj.series[0]) {
                        chartObj.series[0].data.forEach((elem) => {
                            if (elem.x >= xMin && elem.x <= xMax && elem.y >= yMin && elem.y <= yMax)
                                if (elem.options.selectable) {                                    
                                    //selectPoint(elem);
                                    models.push(elem.options);
                                }                            
                        });
                    }                    
                    evalPointsChart(models);
                }
                return false;
            },
            redraw: function () {                
                var [min, max] = calculateNavigator();                
                chart.xAxis[0].setExtremes(min, max, false);                
            }
        },
        height: 500
    },
    yAxis: {
        title: {
            text: 'Minutos'
        },
        crosshair: true
    },
    xAxis: {
        title: {
            text: null//'Hora'
        },        
        dateTimeLabelFormats: {
            second: '%H:%M:%S',
            //day: '%e. %b'
        },
        events: /*Not relevant (i think)*/
    },
    plotOptions: {
        line: {
            point: {
                events: /*Not relevant (i think)*/
            },
            marker: /*Not relevant (i think)*/,
            allowPointSelect: true,            
        },
    },
    navigator: {
        series: {
            lineWidth: 2,
            showInNavigator: true
        },
    },
    tooltip: {
        formatter: function () {            
            return ['<b>' + toTimeStr(new Date(this.x)) + '</b>'].concat(
                this.points ?
                    this.points.map(function (point) {
                        return `<b> ${point.point.options.partnumber ? point.point.options.partnumber + " - " : ""}
                                    ${point.series.name} 
                                </b>: ${point.y} mins.`;
                    }) :
                    []
            );
        },
        split: true
    },
});

And this is the code used to add a serie:

chart.addSeries({
        color: '#2F86A6',
        lineWidth: 3,
        name: name,
        keys: ['x', 'y', 'name', 'selectable', 'partnumber', 'rawObject', 'marker.lineColor', 'marker.lineWidth'],
        data: data,
        showInNavigator: true,
    });

I look for solutions here but they either use two separate series to display 2 different charts or have a very different way to create the chart. The closer that I came to resolve the issue was adding the property "type: 'areaspline'" to the chart constructor, but it overwrites the style and hide the points:

My goal is to add color to the area below the points, but preserving the style and functionality. Tell me if you need more info.

Instead of areaspline, you need to use area series type and change plotOptions.line to plotOptions.area or plotOptions.series. For example:

  plotOptions: {
    series: {
      ...,
      marker: {
        enabled: true
      }
    }
  }

chart.addSeries({
	type: 'area',
	...
});

Live demo: http://jsfiddle.net/BlackLabel/ufrb273t/

Docs: https://www.highcharts.com/docs/chart-and-series-types/chart-types