Apexcharts - Not showing all the datasets specifically for the first and last elements

The screenshot below displays a graph, along with the data used in the chart. The 1st area - id 1 shows datasets B, C, D, but not dataset A (which has a 1.5 value). The last area - id 6 shows datasets A, B, C, but not dataset D (which has a 3.3 value).

This only seems to happen sometimes, but I cannot work out what the conditions are for this to happen. Would appreciate any thoughts/insights on how to fix it.

var optmb1 = {
  series: [
    {
      name: 'A',
      type: 'column',
      color: dataseta,
      data: RAR,
    },
    {
      name: 'B',
      type: 'column',
      color: datasetb,
      data: RBR,
    },
    {
      name: 'C',
      type: 'column',
      color: datasetc,
      data: RCR,
    },
    {
      name: 'D',
      type: 'column',
      color: datasetd,
      data: RDR,
    },
    {
      name: 'Industry Average',
      type: 'line',
      color: datasetavg,
      data:RBENCHR,
    }
  ],
  chart: {
    height: 400,
    fontFamily: 'Franklin Gothic Book, sans-serif',
  },
  legend: {
    show: true,
    position: 'top',
    horizontalAlign: 'center',
  },
  markers: {
    size: 2,
  },
  dataLabels: {
    enabled: false,
    enabledOnSeries: undefined,
    formatter: function (val, opts) {
       return val
    },
    textAnchor: 'middle',
    distributed: false,
    offsetX: 0,
    offsetY: 0,
    style: {
      fontSize: '14px',
      fontFamily: 'Franklin Gothic Book, sans-serif',
      fontWeight: 'bold',
      colors: undefined
    },
    background: {
      enabled: true,
      foreColor: '#fff',
      padding: 4,
      borderRadius: 2,
      borderWidth: 1,
      borderColor: '#fff',
      opacity: 0.9
    }
  },
  title: {
    text: "Results (Sum of 2 Answers normalised)",
    align: 'center',
    style: {
      fontSize:'18px',
    }
  },
  xaxis: {
    type: 'category',
    categories: RID,
    labels: {
      show: true,
      /*rotate: -45,*/
      rotateAlways: false,
      hideOverlappingLabels: false,
      showDuplicates: false,
      trim: false,
      minHeight: undefined,
      maxHeight: undefined,
      style: {
        colors: [],
        fontFamily: 'Franklin Gothic Book, sans-serif',
        fontWeight: 400,
      }
    }
  },
  yaxis: {
    title: {
      text: "Average"
    },
    min: 0,
    max: 5,
    range:5,
    tickAmount:5,
    labels: {
      offsetX: 0,
      offsetY: 0,
      formatter: function(val, index) {
        return val.toFixed(2);
      }
    }
  } 
};

You should specify the min and max value in xaxis to avoid the first and last bars been cropping.

xaxis: {
  type: 'category',
  categories: RID,
  min: 0,
  max: Math.max(...RID) + 1,
  ...,
}

Demo @ StackBlitz