How do I not show GMT and Timezone labels for Highcharts - highcharts

Question

As shown below:
Instead of that I want the x-axis labels to look something like this:
Without the GMT and time-zone. Sorry I am new to Highcharts !
EDIT: added code
Highcharts.theme = {
colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
chart: {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, '#2a2a2b'],
[1, '#3e3e40']
]
},
style: {
fontFamily: "'Unica One', sans-serif"
},
plotBorderColor: '#606063'
},
title: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase',
fontSize: '20px'
}
},
subtitle: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase'
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b'
},
gridLineColor: '#707073',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
title: {
style: {
color: '#A0A0A3'
}
}
},
yAxis: {
gridLineColor: '#707073',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
tickWidth: 1,
title: {
style: {
color: '#A0A0A3'
}
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0'
}
},
plotOptions: {
series: {
dataLabels: {
color: '#B0B0B3'
},
marker: {
lineColor: '#333'
}
},
boxplot: {
fillColor: '#505053'
},
candlestick: {
lineColor: 'white'
},
errorbar: {
color: 'white'
}
},
credits: {
style: {
color: '#666'
}
},
labels: {
style: {
color: '#707073'
}
},
drilldown: {
activeAxisLabelStyle: {
color: '#F0F0F3'
},
activeDataLabelStyle: {
color: '#F0F0F3'
}
},
navigation: {
buttonOptions: {
symbolStroke: '#DDDDDD',
theme: {
fill: '#505053'
}
}
},
navigator: {
handles: {
backgroundColor: '#666',
borderColor: '#AAA'
},
outlineColor: '#CCC',
maskFill: 'rgba(255,255,255,0.1)',
series: {
color: '#7798BF',
lineColor: '#A6C7ED'
},
xAxis: {
gridLineColor: '#505053'
}
},
scrollbar: {
barBackgroundColor: '#808083',
barBorderColor: '#808083',
buttonArrowColor: '#CCC',
buttonBackgroundColor: '#606063',
buttonBorderColor: '#606063',
rifleColor: '#FFF',
trackBackgroundColor: '#404043',
trackBorderColor: '#404043'
},
global: {
useUTC: false
},
// special colors for some of the
legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
background2: '#505053',
dataLabelsColor: '#B0B0B3',
textColor: '#C0C0C0',
contrastTextColor: '#F0F0F3',
maskColor: 'rgba(255,255,255,0.3)'
};
Highcharts.setOptions(Highcharts.theme);
////////////////////
$('#high').highcharts({
chart: {
borderColor: '#EBBA95',
borderRadius: 20,
borderWidth: 2,
zoomType: 'x',
spacingTop: 40
},
title: {
text: 'Humidity/Temperature Graph',
x: -20, //center
y: 5
},
subtitle: {
text: 'Elemental Electronics | Click and drag to zoom',
x: -20,
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b'
},
categories: yearSeries,
},
yAxis: {
title: {
text: 'All points on one graph'
},
plotBands: [
{
color: 'orange', // Color value
from: 0, // Start of the plot band
to: -25 // End of the plot band
,label: {
text: 'Lower Range: 1 ppm',
color: '#ffffff',
align: 'left'
}
},
{
label: {
text: 'Upper Range: 5ppm',
color: '#ffffff',
align: 'left'
},
color: 'orange', // Color value
from: 75, // Start of the plot band
to: 100// End of the plot band
}
],
},
tooltip: {
valueSuffix: '°C'
},
series: [
{
name: 'Temperature',
textColor: '#ffffff',
data: mySeriestemp
}
],
});
});
mySeriestemp and yearSeries are both from arrays that I got using:
for (var i = 0; i < year.length; i++) {
yearSeries.push(new Date(year[i]));
mySeriestemp.push(temp[i]);
}

Answer 1

update
As I seen your code you need to add following
labels: {
formatter: function() {
return Highcharts.dateFormat('%e. %b', this.value);
}
See the working fiddle with your code
Use this
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b'
}
}

Answer 2

formatter function needs to added here to show the labels in desired format
labels: {
formatter: function() {
return Highcharts.dateFormat('%e. %b', this.value);
}