Reduce space between stacked bar in Highcharts

Question

I created stacked column in Highchart.

I used pointWidth: 50 to reduce column bar width, but space between stacked bar is too big.

How to reduce space between stacked bar?

[Updated question]

I also want to display stack name in legend, and user can click to stack name to hide stack in chart. Is it posible?

Here my source code:

JSfiddle link https://jsfiddle.net/viethien/ak2h1sfq/4/

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: {
        categories: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: ( // theme
                    Highcharts.defaultOptions.title.style &&
                    Highcharts.defaultOptions.title.style.color
                ) || 'gray'
            }
        }
    },
    legend: {
        align: 'center',
        x: 0,
        verticalAlign: 'bottom',
        y: 5,
        
        backgroundColor:
            Highcharts.defaultOptions.legend.backgroundColor || 'white',
        borderColor: '#CCC',
        borderWidth: 0,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true
            }
        },
         series: {
      //stacking: 'normal',
      dataLabels: {
        formatter: function() {
          console.log(this);
          return this.series.name;
        },
        enabled: true,
        //allowOverlap: true,
        //align: 'right',
        color: '#fff',
        shadow: false,
        //x:-50,
        style: {
          fontSize: "8px",
          textShadow: "0px"
        }
      },
      //pointPadding: 0.1,
      pointWidth: 50,
      groupPadding: 0,
      stacking: 'normal',
      //colorByPoint: true,
      //showInLegend: false
    }
    },
    series: [{
        name: 'Component',
        data: [[0,5], [1,3], [2,4], [3,7], [4,3]],
        stack: 'Forecast'
    }, {
        name: 'Module',
        data: [[0,2], [1,2], [2,3], [3,2], [4,2]],
        stack: 'Forecast'
    },
    {
        name: 'Board',
        data: [3, 5, 5, 3, 2],
        stack: 'Forecast'
    },
    {
        name: 'Component',
        data: [6, 4, 5, 8, 4],
        stack: 'Real'
    }, {
        name: 'Module',
        data: [3, 3, 4, 3, 3],
        stack: 'Real'
    },
    {
        name: 'Board',
        data: [4, 6, 6, 4, 3],
        stack: 'Real'
    }
 ]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

Answer 1

You can set the groupPadding to higher value, which moves the column together for the group. Be aware that using the fixed value for the pointWidth disturbs the chart responsivity, but you can customize those values for particular chart width using the responsive rules: https://api.highcharts.com/highcharts/responsive

Demo: https://jsfiddle.net/BlackLabel/we1rc5vg/

  plotOptions: {
    column: {
      stacking: 'normal',
    },
    series: {
      //stacking: 'normal',
      dataLabels: {
        formatter: function() {
          console.log(this);
          return this.series.name;
        },
        enabled: true,
        //allowOverlap: true,
        //align: 'right',
        color: '#fff',
        shadow: false,
        //x:-50,
        style: {
          fontSize: "8px",
          textShadow: "0px"
        }
      },
      //pointPadding: 0,
      pointWidth: 50,
      groupPadding: 0.2,
      stacking: 'normal',
      //colorByPoint: true,
      //showInLegend: false
    }
  },

API: https://api.highcharts.com/highcharts/series.column.groupPadding

---

EDIT:

To create a stack legend item you need to add a series without data (that creates the legend button) and customize button functionality using the legendItemClick callback.

Demo: https://jsfiddle.net/BlackLabel/qLs219u4/

Notice that this solution may not work perfectly when stack will be hidden and the user will click on a particular series legend item from the hidden stack.

Once I have worked on really complicated example of it. If you want to know you can explore this topic here: https://www.highcharts.com/forum/viewtopic.php?t=42157