Arranging Layers of Chart Values Without Disrupting Format

[cartercjb]

Does anyone have suggestions on how to change the layers in which the values are plotted?

I have this chart where the data label shape for RUNNING 14-D AVG. is behind the Column: 

I tried re-arranging the Values, which does fix the layering problem, but for some reason, it eliminates the line chart's data label shape:

Any suggestions? Here is the widget's script for formatting: 

widget.on('processresult', function(e, args) {
 
 var markerRadius = 18;
 var markerColor = '#FF0000';
 var markerHoverColor = '#C0C0C0';
 var labelSize = '12px';
 var labelColor = '#FFFFFF';
 var lineStyle = 'shortdash';
 var lineWidth = 1;
 
 var chartS = args.result.series;
 
 for(var s = 0; s < chartS.length; s++ ) {
 var dd;
 
 chartS[s].dashStyle = lineStyle;
 chartS[s].lineWidth = lineWidth;
 
 chartS[s].marker = {
 symbol: 'circle'
 }
 
 
 for(var d = 0; d < chartS[s].data.length; d++) {
 dd = chartS[s].data[d];
 
 var dataLabelsTemplate = {
 enabled : true,
 y : (markerRadius /2),
 style: {
 color: labelColor,
 textOutline: 'none',
 fontSize : labelSize, 
 fontWeight : "bold"
 }
 };
 
 dd.dataLabels = dataLabelsTemplate;
 
 dd.marker.radius = markerRadius;
 dd.marker.enabled = true;
 dd.marker.fillColor = chartS[s].color;
 dd.marker.states.hover.fillColor = chartS[s].color;
 dd.marker.states.hover.radius = markerRadius;
 dd.marker.states.hover.enabled = true; 
 
 }
 }
 

}); 


//column chart

widget.on('processresult', function(se, ev){
    var legend = ev.result.legend;
                        legend.itemStyle.fontWeight = 'bold';
                        legend.itemStyle.color = '#000000';     
    
    var seriesNames = ['Actual All Service'];

    seriesNames.forEach(function(e,i,a){
        var data = _.find(ev.result.series, function (ser) {return ser.name == e}).data
            _.each(data, function(value){
                    value.dataLabels = {enabled:true,inside:true, style:{'fontSize':'12px','color':'#000000' ,'fontWeight':'bold'}, rotation:0, align:'center', verticalAlign:'top'}})}
						
	
)})
widget.on('render', function(se,ev){
    //bold bottom and left
    se.queryResult.xAxis.labels.style.fontWeight = 'bold';
    se.queryResult.yAxis[0].labels.style.fontWeight = 'bold';
})
widget.on('ready', function(jx){

    $('.highcharts-plot-band-label',element).css({'font-weight':'bold'}) 

})


widget.on('ready', ()=> {
   $(element).parent().css('border-radius', '20px');
   $(element).parent().parent().css('border-radius', '20px');
})

[harikm007 · Accepted solution]

@cartercjb ,

Please add the highlighted code in your script:

Result:

-Hari