How Can I remove the extension Gridline from my graph?

Question

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

Sebastian Hajdus · Answer 1 · 2022-05-10T07:29:07.683

0

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/

edited May 10 '22 at 07:29

answered Apr 18 '22 at 12:53

Sebastian Hajdus

1,422
1
5
14

I'm trying to add minPadding and maxPadding for xAxis with startOnTick and endOnTick But its not working. – Mst. Bithy Apr 19 '22 at 10:03
Show me your example, that might better understand what's going on in your code. – Sebastian Hajdus Apr 19 '22 at 10:53
https://jsfiddle.net/Bithy/ng1k5h70/53/ – Mst. Bithy Apr 19 '22 at 12:25
I'm sharing my code on jsfiddle – Mst. Bithy Apr 19 '22 at 12:51
Ok, thanks, try to simplify your case to a working version. – Sebastian Hajdus Apr 20 '22 at 08:34
I simplified your example, to your goals, is this what you're looking for? https://jsfiddle.net/BlackLabel/305z7yf1/2/ – Sebastian Hajdus May 10 '22 at 07:29
It worked but still have some issues. I want to remove the numbering(1 to 24) of xAxis. I don't need any numbering of xAxis. – Mst. Bithy May 10 '22 at 10:33
Use [xAxis.labels.enabled](https://api.highcharts.com/highcharts/xAxis.labels.enabled) to turn off labels, for remove tick on xAxis chose [xAxis.tickWidth](https://api.highcharts.com/highcharts/xAxis.tickWidth). Live demo: https://jsfiddle.net/BlackLabel/305z7yf1/3/ – Sebastian Hajdus May 10 '22 at 13:08

How Can I remove the extension Gridline from my graph?

1 Answers1