I’m using the Highcharts library to create a chart, and I’m encountering an issue where the data point is always displayed at the bottom of the chart, even when the data is represented at the upper end of the Y-axis. I’d like the data point to be displayed at the top of the chart to make it easier to visualize the data, especially when it’s at its maximum.

Here is the code

        <script>    
        (($, consts) => {   
            const { HOUR, DAY, WEEK, MONTH } = consts;
            let chart;
            let data;
            
            const getData = async (callback) => {
                let dateFormat = {
                        [HOUR]: 'hour', 
                        [DAY]: 'day',
                        [WEEK]: 'week'
                    }[_vl.consts.timeInterval] || 'month';
                
                var hiddenSeries = [];
                            
                Highcharts.charts.forEach(function(chart) {
                    if (chart && chart.series) {
                        chart.series.forEach(function(series) {
                            if (!series.visible) {
                                hiddenSeries.push({
                                    chartId: chart.renderTo.id,
                                    seriesName: series.name
                                });
                            }
                        });
                    }
                });
                             
                const request = await jQuery.ajax({
                    url: '/wp-admin/admin-ajax.php', // this is the object instantiated in wp_localize_script function
                    type: 'POST',
                    data: {
                        action: 'get_visitor_source_performance_visitors', // this is the function in your functions.php that will be triggered
                        data: { 'date-format': dateFormat },
                    },
                    success: function (response) {
                        console.log('visitors] fetched: ', response.data);
                        data = response.data.rows;
                        callback();
                         Highcharts.charts.forEach((chart) => {
                            if (!chart) return;
                            
                            hiddenSeries.forEach((hidden) => {
                        
                            if (chart && chart.renderTo.id == hidden.chartId) {
                                var seriesToHide = chart.series.find(series => series.name === hidden.seriesName);
                            
                                if (seriesToHide) {
                                    seriesToHide.setVisible(false);
                                } else {
                                    // Series with name  not found in the chart.
                                }
                            } else {
                                // Chart object not found.
                            } 
                        })
                        })
                    },
                });
                console.log(request);
            } 
            
            let series = [];
            const updateSeries = () => {
                series = [];
                let grouped = _.groupBy(data, 'source');
                
                for (const name in grouped) {
                    let serieData = grouped[name].map(v => [new Date(v.date).getTime(), +v.sources]);
                    
                    if (WEEK === _vl.consts.timeInterval) {
                        const aggregated = {};
                        serieData.forEach((d) => {
                            d[0] = _vl.charts.getTimeSlot(new Date(d[0]).toISOString()).getTime();                                                      
                            aggregated[d[0]] = (aggregated[d[0]] || 0) + d[1];
                        });                     
                        
                        serieData = Object.keys(aggregated).map(time => ([+time, aggregated[time]]));
                    }
                    
                    series.push({ 
                        name: name || 'Unknown', 
                        data: serieData, 
//                      color: _vl.charts.colors[name.replace(/ /g, '-').toLowerCase()],
                        colorIndex: _vl.charts.colorsByCls[name || 'Unknown']
                    });
                }
            }
        
            const setChart = () => {
                _vl.updErrorMsg('');
                updateSeries();

                const chartCfg = {
                  chart: {
                    type: 'area',
                    animation: {
                      duration: 700,
                      easing: t => t
                    }
                  },                  
                  loading:{
                    hideDuration: 100,
                    labelStyle: {'fontWeight': 'bold', 'position': 'relative', 'top': '45%'},
                    showDuration: 100,
                    style: {'position': 'absolute', 'backgroundColor': '#ffffff', 'opacity': 0.5, 'textAlign': 'center'}
                  },
                  title: {
                    text: 'Source'
                  },
                  subtitle: {
                    text: 'By ' + _vl.charts.sourceMode + ' visit'
                  },
                  xAxis: {
                    type: 'datetime',
                    pointInterval: _vl.charts.getPointInterval(),
                    labels: {
                      format: ((arg) => {
                        return WEEK === _vl.consts.timeInterval ? '{value:Week %W/%Y}' : null;
                      })()
                    },
                    min: _vl.charts.timeBorderFrom - DAY,
                    max: _vl.charts.timeBorderTo + DAY
                  },
                  yAxis: {
                    allowDecimals: false,
                    title: {
                      text: 'Source'
                    },
                  },
                  tooltip: {
                        shared: true,
                        split: true,
                        pointFormat: '{series.name}: <b>{point.y}</b> (by <i>' + _vl.charts.sourceMode + '</i> visit on {point.x:%Y-%m-%d})',
                    },
                  plotOptions: {
                    area: {
                        stacking: 'normal',
                    },
                  },
                  series
                };

                chart = Highcharts.chart('sourceChartContainer', chartCfg);
            }
            
            setChart();     
            
            const updateChart = () => {
                chart.showLoading();
                getData(() => {
                    setChart();
                    chart.hideLoading();
                });
            }
            updateChart();
            
            _vl.charts.chartRefs.push({chart, setChart: updateChart, type: chart.title.textStr});
        })(jQuery, _vl.consts);
        </script>
        <style>
            #sourceChartContainer .highcharts-loading-inner::after {
                margin-left: 10px;
                content: 'Others';
                animation: loading 4s infinite;
            }
            @keyframes loading {
              20% {
                color: blue;
                content: 'Google organic'
              }
              40% {
                color: red;
                content: 'Google Ad'
              }
              60% {
                color: orange;
                content: 'Facebook Ad'
              }
              80% {
                color: yellow;
                content: 'Unknown'
              }
              100% {
                color: purple;
                content: 'Google organic'
              }
            }
        </style>
    ```