apexcharts update bar width in between column with group label

Question

Hi I'm using apexcharts column group with label. Here's the sample code from their demo

var options = {
      series: [{
      name: "sales",
      data: [{
        x: '2019/01/01',
        y: 400
      }, {
        x: '2019/04/01',
        y: 430
      }, {
        x: '2019/07/01',
        y: 448
      }, {
        x: '2019/10/01',
        y: 470
      }, {
        x: '2020/01/01',
        y: 540
      }, {
        x: '2020/04/01',
        y: 580
      }, {
        x: '2020/07/01',
        y: 690
      }, {
        x: '2020/10/01',
        y: 690
      }]
    }],
      chart: {
      type: 'bar',
      height: 380
    },
    xaxis: {
      type: 'category',
      labels: {
        formatter: function(val) {
          return "Q" + dayjs(val).quarter()
        }
      },
      group: {
        style: {
          fontSize: '10px',
          fontWeight: 700
        },
        groups: [
          { title: '2019', cols: 4 },
          { title: '2020', cols: 4 }
        ]
      }
    },
    title: {
        text: 'Grouped Labels on the X-axis',
    },
    tooltip: {
      x: {
        formatter: function(val) {
          return "Q" + dayjs(val).quarter() + " " + dayjs(val).format("YYYY")
        }  
      }
    },
    };

    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();

I want to adjust the width of the bar per group such that the bars above the groupings 2019 and 2020 are almost non existent or much closer to each other.

I tried setting up the columnWidth: '30%' but it is just the bar width that has been adjusted. I want to close the gap in between bars per group.

I also tried computing it using the one posted here in stackoverflow using

var optimalColumnWidthPercent = 20 + (60 / (1 + 30*Math.exp(-seriesLength /3)));
plotOptions: {
  bar: {
    columnWidth: optimalColumnWidthPercent + "%"
  },
},

But it is not the thing I'm looking for. How can I achieve this behavior?

Answer 1

If you want the bars to touch each other the columnWidth has to be 100%; if you want them to "almost touch each other", it should be a value slightly less than that, e.g., 98%. That has to be coupled with a stricter control of the chart width (through the css sizes of the chart div - e.g., style="max-width: 600px" if you set the height of the chart to 300), to avoid it extending too much and make the bars unpleasantly wide.

To add a space between the groups, the only solution I can think of is to add a fake "spacer" data point between them, value: null; that has to be taken in to account in the xaxis.labels.formatter:

dayjs.extend(dayjs_plugin_quarterOfYear)
var options = {
    series: [{
        name: "sales",
        data: [{
            x: '2019/01/01',
            y: 400
        }, {
            x: '2019/04/01',
            y: 430
        }, {
            x: '2019/07/01',
            y: 448
        }, {
            x: '2019/10/01',
            y: 470
        },
        {//spacer
            x: '',
            y: null
        },
        {
            x: '2020/01/01',
            y: 540
        }, {
            x: '2020/04/01',
            y: 580
        }, {
            x: '2020/07/01',
            y: 690
        }, {
            x: '2020/10/01',
            y: 690
        }]
    }],
    chart: {
        type: 'bar',
        height: 380
    },
    xaxis: {
        type: 'category',
        labels: {
            formatter: function(val){
                if(!val) return '';
                return "Q" + dayjs(val).quarter()
            }
        },
        group: {
            style: {
                fontSize: '10px',
                fontWeight: 700
            },
            groups: [
                {title: '2019', cols: 4},
                {title: '', cols: 1},
                {title: '2020', cols: 4}
            ]
        }
    },
    title: {
        text: 'Grouped Labels on the X-axis',
    },
    tooltip: {
        x: {
            formatter: function(val){
                return "Q" + dayjs(val).quarter() + " " + dayjs(val).format("YYYY")
            }
        }
    },
    plotOptions: {
        bar: {
            columnWidth: '98%'
        }
    }
};

const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

<div id="chart" style="max-width: 600px; background-color: rgba(192, 192, 192, 0.7)"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.45.2/apexcharts.min.js" 
        integrity="sha512-vIqZt7ReO939RQssENNbZ+Iu3j0CSsgk41nP3AYabLiIFajyebORlk7rKPjGddmO1FQkbuOb2EVK6rJkiHsmag==" 
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.10/dayjs.min.js"
        integrity="sha512-FwNWaxyfy2XlEINoSnZh1JQ5TRRtGow0D6XcmAWmYCRgvqOUTnzCxPc9uF35u5ZEpirk1uhlPVA19tflhvnW1g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.10/plugin/quarterOfYear.min.js"
        integrity="sha512-pWtHtIgIdv64mVaEbh1ACEvfsrMvdSuJ7xGLzm3s1LiSPyA2pGit3cjTBHvFQCkXoX2r9drLdcfAP7C8eGbBTQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>