Alter SVG After Highcharts is Redrawn - svg

Question

I'm trying to specifically target the first and last x-axis labels, which are text elements, and alter their attributes.
To preface this issue, I was trying to keep the first and last x-axis labels within the confines of the Highcharts container. Unfortunately, they are cutting off in the UI.
This is my configuration:
xAxis: [{
type: 'datetime',
showFirstLabel: true,
showLastLabel: true,
labels: {
step: 3,
formatter: function(){
return options.labels[this.value];
},
style: {
fontSize: '10px',
color: '#9c9c9c'
},
// x: 5,
y: 10
},
startOnTick: true,
// lineColor: 'transparent',
tickLength: 0,
minPadding: 0,
maxPadding: 0
}],
The step key is causing this I realize. Otherwise, I would be able to use overflow:justify, but I wanted the step. So, I then decided that perhaps altering the SVG would be a good solution. It worked when the chart is first loaded, but it does not work when being redrawn.
This was my solution on 'load', which I'd like to replicate on 'redraw':
Highcharts.Chart.prototype.callbacks.push(function(chart){
$('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25);
$('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813);
});

Answer 1

You should configure these callbacks in the options of your chart. It's cleaner that way:
function moveLabels(){
$('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25);
$('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813);
}
$('#container').highcharts({
chart: {
events: {
load: moveLabels
redraw: moveLabels
}
}
},
...