How to hide grid line protrusion in bar chart - highcharts

Question

I'm using Highcharts, and want to hide the protrusion of grid line out of the graph area. I mean,
it looks like this now:
and I want it to look like this (The protrusion of grid line in the right of the chart is hidden):
The highcharts config is below:
{
chart: {
width: 420,
height: 350,
style: {
textAlign: 'center',
'text-align': 'center',
},
},
colors: ['#a1cbff'],
title: {
text: undefined,
},
xAxis: {
title: { text: undefined },
tickInterval: 0.1,
max: 1,
min: 0,
gridLineWidth: 1,
},
yAxis: [{
title: { text: undefined },
}],
series: [{
type: 'column',
pointPlacement: 'between',
data: [...SOME_DATA],
}],
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 1,
groupPadding: 0,
shadow: false,
},
},
tooltip: {
formatter() { return this.y; },
},
legend: {
enabled: false,
},
exporting: false,
credits: false,
}

Answer 1

It is possible, however, it is not so simple and intuitive to make it as you expect in Highcharts. Check the demo and code posted below, there you will find the solution with pointRange = 0.1, pointPlacement = -0.5, min: 0.05, max: 0.95 and tickInterval = 0.1.
Code:
Highcharts.chart('container', {
chart: {
width: 420,
height: 350,
style: {
textAlign: 'center',
'text-align': 'center',
},
},
colors: ['#a1cbff'],
title: {
text: undefined,
},
yAxis: [{
title: {
text: undefined
}
}],
xAxis: {
min: 0.05,
max: 0.95,
tickInterval: 0.1
},
series: [{
type: 'column',
pointPlacement: -0.5,
pointRange: 0.1,
data: [
[0.1, 130],
[0.2, 110],
[0.3, 240],
[0.4, 150],
[0.5, 250],
[0.6, 190],
[0.7, 240],
[0.8, 220],
[0.9, 270],
[1, 160]
],
}],
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 1,
groupPadding: 0,
shadow: false,
},
},
tooltip: {
formatter() {
return this.y;
},
},
legend: {
enabled: false,
},
exporting: false,
credits: false,
});
Demo:
https://jsfiddle.net/BlackLabel/wtxd9y2f/
API reference:
https://api.highcharts.com/highcharts/series.column.pointRange
https://api.highcharts.com/highcharts/series.column.pointPlacement