[Solved]-How to add space between series in stacked columns in HighChart?-Highcharts

i have a solution. i add a new auxiliary array, according to the data object.

import { component, oninit, eventemitter } from '@angular/core';

@component({
  selector: 'app-comb',
  templateurl: './comb.component.html',
  styleurls: ['./comb.component.scss']
})
export class combcomponent implements oninit {
  @output() onclickcolumn = new eventemitter();
  options;

  data = {
    reported:    [0, 0, 3, 7, 8, 7, 7, 0, 0, 0, 3, 8, 8, 6, 0, 0, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    npl:         [0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    overtimes:   [0, 0, 1, 3, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    required:    [0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    weekends:    [8, 8, 0, 0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 8, 8, 0],
    expected:    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 8, 8, 0, 0, 8, 8, 8, 7, 8, 0, 0, 8],
    future_plan: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  }
  auxdata: array<number> = [];

  constructor() {}

  ngoninit() {
    this.createauxdata();
    this.options = {
      chart: {
        type: 'column'
      },
      credits: {
        enabled: false
      },
      title: {
        text: null
      },
      legend: {
        enabled: false
      },
      tooltip: {
        enabled: false
      },
      xaxis: {
        categories:  [ "2016-12-01", "2016-12-02", "2016-12-03", "2016-12-04", "2016-12-05", "2016-12-06", "2016-12-07", "2016-12-08", "2016-12-09", "2016-12-10", "2016-12-11", "2016-12-12", "2016-12-13", "2016-12-14", "2016-12-15", "2016-12-16", "2016-12-17", "2016-12-18", "2016-12-19", "2016-12-20", "2016-12-21", "2016-12-22", "2016-12-23", "2016-12-24", "2016-12-25", "2016-12-26", "2016-12-27", "2016-12-28", "2016-12-29", "2016-12-30", "2016-12-31" ],
        labels: {
          formatter: function () {
            if (this.value.status === 'weekend') {
              return `
                <span>${moment(this.value.date).format('dd')}</span>
                <br>
                <span>${moment(this.value.date).format('dd')}</span>`;
            } else if (this.value.status === 'now') {
              return `
                <span style="color: blue">${moment(this.value.date).format('dd')}</span>
                <br>
                <span style="color: blue">${moment(this.value.date).format('dd')}</span>`;
            } else {
              return `
                <span style="color: black">${moment(this.value.date).format('dd')}</span>
                <br>
                <span style="color: black">${moment(this.value.date).format('dd')}</span>`;
            }
          }
        },
        ticklength: 40
      },
      yaxis: {
        tickpositions: [0, 4, 8, 10],
        endontick: false,
        ceiling: 24,
        title: {
            text: null
        }
      },
      plotoptions: {
        column: {
          stacking: 'normal',
        },
        series: {
          allowpointselect: true,
          states: {
            select: {
              color: null,
              borderwidth: 1,
              bordercolor: 'blue'
            }
          },
          pointwidth: 30,
          datalabels: {
            usehtml: true,
            enabled: true,
            color: 'black',
            style: {
              fontsize: '9px'
            },
            verticalalign: 'top',
            formatter: function() {
              if (moment().isbefore(this.point.category.date)) {
                return;
              } else {
                if (this.point.category.status === 'now') {
                  this.point.bordercolor = 'blue';
                }
                if (this.y !== 0) {
                  return this.y;
                }
              }
            }
          },
          cursor: 'pointer',
        }
      },
      series: [
        {
          name: 'diff',
          color: 'rgba(255, 255, 255, 0.8)',
          bordercolor: 'rgb(194, 194, 194)',
          borderwidth: 1,
          datalabels: false,
          data: this.data.expected

        },
        {
          name: 'weekend',
          color: 'rgba(194, 194, 194, 0.4)',
          bordercolor: 'rgb(194, 194, 194)',
          borderwidth: 1,
          datalabels: false,
          data: this.data.weekends

        },
        {
          name: 'overtimes',
          color: 'rgba(243, 183, 74, 0.8)',
          bordercolor: 'rgb(194, 194, 194)',
          borderwidth: 1,
          data: this.data.overtimes

        },
        {
          name: 'auxdata',
          color: 'rgb(255, 255, 255)',
          bordercolor: 'rgb(194, 194, 194)',
          borderwidth: 1,
          datalabels: false,
          data: this.auxdata

        },
        {
          name: 'loged hours',
          color: 'rgba(26, 179, 148, 0.8)',
          bordercolor: 'rgb(26, 179, 148)',
          borderwidth: 1,
          data: this.data.reported

        },
        {
          name: 'npa',
          color: 'rgba(28, 132, 198, 0.8)',
          bordercolor: 'rgb(28, 132, 198)',
          borderwidth: 1,
          data: this.data.npl

        },
        {
          name: 'no report',
          color: 'rgba(255, 255, 255, 0.8)',
          bordercolor: 'rgb(237, 85, 101)',
          borderwidth: 1,
          data: this.data.required

        },
        {
          name: 'report not send',
          color: 'rgba(237, 85, 101, 0.8)',
          bordercolor: 'rgb(237, 85, 101)',
          borderwidth: 1,
          data: this.data.future_plan

        }
      ]
    };
  }

  createauxdata() {
      for (var i = 0; i < this.data.reported.length; i++) {
      if (this.data.reported[i] !== 0 && (this.data.reported[i] + this.data.npl[i]) < 8) {
        var diff = 8 - this.data.reported[i] - this.data.npl[i];
       this.auxdata.push(8 - this.data.reported[i] - this.data.npl[i]);
      } else {
        this.auxdata.push(0);
      }
    }
  }


  onclick(e) {
    if (!e.point) {
      return false;
    } else {
      this.onclickcolumn.emit(e.point.category.date);
    }
  }

}

so i have such chart: