Wie entfernt man den Abstand zwischen Balken im HighCharts Balkendiagramm?

Question

Ich versuche, ein einfaches Balkendiagramm mit HighCharts zu machen.

Ich möchte den Abstand zwischen den Bars entfernen. Meine Forschung führte mich zu der Annahme, dass die Eigenschaften groundPadding und pointPadding für diesen Raum verantwortlich waren. Aber das Setzen von beiden auf 0 hat nichts geändert.

const config = { 
     chart: { 
     type: 'bar', 
     spacingTop: 0, 
     spacingRight: 0, 
     spacingBottom: 0, 
     spacingLeft: 0, 
     // marginTop: 0, 
     // marginRight: 0, 
     // marginBottom: 0, 
     // marginLeft: 0 
     }, 
     title: { 
     text: null 
     }, 
     legend: { 
     enabled: false 
     }, 
     credits: { 
     text: '' 
     }, 
     xAxis: { 
     categories: options.map(option => option.option), 
     // lineWidth: 0, 
     // tickWidth: 0, 
     }, 
     yAxis: { 
     title: { 
      enabled: false, 
     }, 
     gridLineWidth: 0, 
     tickAmount: 0, 
     showFirstLabel: false, 
     showLastLabel: false 
     }, 
     series: [{ 
     data: options.map(option => option.votes) 
     }], 
     plotOptions: { 
     bar: { 
      dataLabels: { 
      enabled: true 
      } 
     }, 
     series: { 
      pointWidth: 20, 
      groundPadding: 0, 
      pointPadding: 0 
     } 
     } 
    }; 

Irgendwelche Ideen?

EDIT:

Nicht sicher, ob relevant, aber die rote div mein Diagramm Verpackung ist:

<div style={{ width: '100%', height: '100%', margin: 'auto', border: '2px solid red' }}> 
    <ReactHighCharts config={config}></ReactHighCharts> 
</div> 

Und die grüne div hat Abmessungen: width: 350px und height: 400px

Demo: https://remove-space-between-bar-hbslv6.stackblitz.io

Answer 1

groundPadding und pointPadding wird innerhalb bar statt series

plotOptions: { 
    bar: { 
    groupPadding: 0, 
    pointPadding: 0, 
    dataLabels: { 
     enabled: true, 
    } 
    } 
}, 

Demo

Answer 2

Sie einen Fehler im Code haben. Sie setzen groundPadding anstelle von groupPadding. Wenn Sie pointPadding und groupPadding verwenden, wird die Einstellung pointWidth nicht wirksam, da pointWidth basierend auf diesen beiden Parametern berechnet wird. Wenn Sie für alle Punkte eine Breite festlegen möchten, legen Sie nur die Eigenschaft pointWidth fest. Wenn Sie die Höhe des Diagramms jedes Mal erhöhen, wenn ein weiterer Punkt hinzugefügt wird, können Sie die Anzahl der Punkte beim Belastungsereignis überprüfen und die Diagrammgröße mithilfe der Funktion chart.setSize entsprechend ändern. Schauen Sie sich das Beispiel unten an.

API-Referenz:
https://api.highcharts.com/class-reference/Highcharts.Chart.html#setSize

Beispiel:
http://jsfiddle.net/221k5wLh/