HighCharts: GridLine-Überhang entfernen (Angular/TypeScript)

Question

Ich habe ein Dutzend verschiedene Lösungen ausprobiert, aber es scheint immer einen Überhang der Gitternetzlinien zu geben, wenn sie direkt auf dem Tick beginnen/enden. Ich suche nach einer Lösung, um entweder diesen Überhang zu entfernen, oder die Start-/Endpunkte leicht zu verschieben, so dass sie auf der Linie erscheinen, aber nicht diesen Überhang auslösen, um aufzutauchen. Arbeiten in einer Angular/TypeScript-Umgebung.

gridline Überhang:

Aktuelle Grafikeinstellungen:

chart: { 
    type: 'spline' 
}, 
title: null, 
xAxis: [{ 
     categories: [ 
      'Open 11am', '12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10pm close' 
     ], 
    gridLineWidth: 1, 
    labels: { 
    enabled: true 
    }, 
    tickWidth: 0, 
    tickmarkPlacement: 'on', 
    startOnTick: true 
}], 
yAxis: [{ 
    title: null, 
    labels: { 
     x: 0, 
     y: -2 
    }, 
    tickLength: 0, 
    tickWidth: 0 
}], 
series: [{ 
    name: null, 
    data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], 
    marker: { 
    fillColor: '#FFFFFF', 
    lineWidth: 2, 
    lineColor: null 
    } 
}], 
    credits: { 
     enabled: false 
    }, 
    legend: { 
    enabled: false 
    } 

Wie kann ich diesen Überhang verhindern zu zeigen, während auf den Start- und Zielkategorie Striche mit?

Ich habe fast jede Option ausprobiert, die ich kenne, aber ich gebe zu, dass ich noch ziemlich neu in der HighCharts API bin. Danke für die Antworten im Voraus.

edit:

Hier ist ein jsfiddle das Problem zu schaffen.

Answer 1

Aktualisieren Sie Ihre xAxis als

//startOnTick: true, 
min: .5, 
max: 10.5, 

updated Fiddle

min als 0,5 und max 10.5 Werte festgelegt und entfernt die Räume und auch startOnTick: true aus dem Code entfernen, da es von tick zu starten zwingt. Aber zur gleichen Zeit ändern Sie mit Ellipsis, so Kommentar min, wenn Ellipse unerwünscht ist