Calculating two bar charts on the same set of axes in apexchart for jsReport

Question

I am new to apexchart and I would like to plot two bar chart on the same set of axes, i don want them to be stacked. More like in this hand drawn image where G1 can be taken as year 1 and G2 as y2 and I want to plot data for region A,B and C for both years on the same axes

Here the code i tried, And I am stuck. I want each region(A,B,C) to have the same color for both G1 and G2

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
 {{!-- bar chart for Completed calls --}}

  <div id="myFirstChart"></div>
  <script>

    const chartRenders = [];
    var CallsG1 = [2,5,3]
    var regions = [A,B,C]
    var CallsG2 = [80,50,35];
    var CallsConbined = Call.concat(rural);

    var options = {
      series: [{
        name: "Calls",
        data: CallsConbined
      }],
      chart: {
        type: 'bar',
        height: 350,
        toolbar: {
          show: false,
      },
      animations: {
        enabled: false,
      }
      },
      plotOptions: {
        bar: {
          distributed: true,
          columnWidth: "95%",
          horizontal: false,
        }
      },
      colors:["#008000","#0000FF","#800080","#008000","#0000FF","#800080"],
      dataLabels: {
        enabled: false
      },
      legend: {
        customLegendItems: regions
      },
      xaxis: {
        labels: {
          show: true
        },
          group: {
            style: {
              fontSize: '25px',
              fontWeight: 700
            },
            groups: [
              { title: 'Urban', cols: Call.length},
              { title: 'Rural', cols: rural.length}
            ]
          }
      }       
  };
  var chart = new ApexCharts(document.querySelector("#myFirstChart"), options);
  chartRenders.push(chart.render());
</script>