'How Can I remove the extension Gridline from my graph?

I design my graph using Highchart. But I can not customize it using CSS and js. Now this time I can't remove the extra grid line from the chart that I have shown in my screenshot. I try to modify d="M 77.5 45 L 77.5 365" from my code, but I can't get it to work. How can I solve this problem! Any help will be appreciated.

Here is a screenshot for clarity:

Screenshot



Solution 1:[1]

You need to force the axis to start or end on a tick. Use this option with the minPadding option to control the axis start or maxPadding for end.

Highcharts.chart('container', {
  xAxis: {
    startOnTick: true,
    endOnTick: true,
    gridLineWidth: 1,
    type: 'datetime'
  },

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    pointStart: Date.UTC(2010, 0, 1),
    pointInterval: 3 * 24 * 3600 * 1000
  }]
});

https://api.highcharts.com/highcharts/xAxis.startOnTick https://api.highcharts.com/highcharts/xAxis.endOnTick

https://jsfiddle.net/BlackLabel/305z7yf1/1/


EDITED

I simplified your example, to your goals.

https://jsfiddle.net/BlackLabel/305z7yf1/2/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1