HighCharts棒グラフの棒間のスペースを削除するにはどうすればよいですか？

Question

私はHighChartsを使って簡単な棒グラフを作成しようとしています。

バーの間のスペースを削除したいと思います。私の研究は、私が、groundPaddingとpointPaddingという特性がこのスペースの原因であったと信じてくれました。しかし、両方を0に設定しても何も変わりませんでした。

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 
     } 
     } 
    }; 

EDIT：

該当する場合わからないが、赤div私のチャートをラップは以下のとおりです。

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

と緑divは寸法を有し：width: 350pxとheight: 400px

はデモ：https://remove-space-between-bar-hbslv6.stackblitz.io

Answer 1

groundPaddingおよびpointPaddingは、あなたがあなたのコードに誤りがありbar代わりのseries

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

Demo

Answer 2

の内側になります。 groupPaddingの代わりにgroundPaddingと設定します。また、pointPaddingとgroupPaddingを使用している場合は、これらの2つのパラメータに基づいてpointWidthが計算されるため、その前にpointWidthを設定しても効果はありません。すべてのポイントに対して1つの幅を使用する場合は、pointWidthプロパティのみを設定します。別のポイントを追加するたびにチャートの高さを上げる場合は、chart.setSize機能を使用して、ロードイベント時のポイント数を確認し、チャートサイズを適切に変更することができます。以下の例を見てください。

APIリファレンス：
https://api.highcharts.com/class-reference/Highcharts.Chart.html#setSize

例：
http://jsfiddle.net/221k5wLh/