dc.js composite chart not working with names/text in x-axis

Question

I am using dc.js and crossfilter to create a composite chart. The chart works when x-axis has date values but fails when I add name/text values. A fiddle to show the issue.

Here is a working composite chart code that I was able to run:

compositeChart
  .width(600)
  .height(300)
  .transitionDuration(1000)
  .margins({top: 30, right: 50, bottom: 25, left: 60})
  .dimension(monthDimension)
  .mouseZoomable(true)
  .shareTitle(false)
  .x(d3.scaleTime().domain([new Date(2022, 0, 1), new Date(2023, 11, 31)]))
  .round(d3.timeMonth.round)
  .xUnits(d3.timeMonths)
  .elasticY(true)
  .renderHorizontalGridLines(true)
  .legend(dc.legend().x(70).y(10).itemHeight(13).gap(5))
  .brushOn(false)
  .compose([
      new dc.LineChart(compositeChart)
              .group(montlyVolumeGroup, "Monthly Volume")
              .valueAccessor(function (d) {
                  return d.value;
              }),
      new dc.LineChart(compositeChart)
              .group(monthlyAmountGroup, "Monthly Amount")
              .valueAccessor(function (d) {
                  return d.value;
              })
              .title(function (d) {
                  var value = d.value.avg ? d.value.avg : d.value;
                  if (isNaN(value)) value = 0;
                  return dateFormat(d.key) + "\n" + numberFormat(value);
              })
              .ordinalColors(["orange"])
              .useRightYAxis(true)
  ])
  .yAxisLabel("Monthly Volume")
  .rightYAxisLabel("Monthly Amount")
  .renderHorizontalGridLines(true);

but when I tried to create a composite chart with client names in x-axis, it fails with TypeError: Cannot read properties of undefined (reading 'all')

let clientChart = dc.compositeChart('#client-chart');

clientChart
  .width(600)
  .height(300)
  .transitionDuration(1000)
  .margins({top: 30, right: 50, bottom: 25, left: 60})
  .dimension(client)
  .mouseZoomable(true)
  .shareTitle(false)
  .x(d3.scaleOrdinal())
  .xUnits(dc.units.ordinal)
  .elasticY(true)
  .renderHorizontalGridLines(true)
  .legend(dc.legend().x(70).y(10).itemHeight(13).gap(5))
  .brushOn(false)
  .compose([
      new dc.LineChart(clientChart)
              .group(clientVolumeGroup, "Payment Volume")
              .valueAccessor(function (d) {
                  return d.value;
              }),
      new dc.LineChart(clientChart)
              .group(clientAmountGroup, "Payment Amount")
              .valueAccessor(function (d) {
                  return d.value;
              })
              .title(function (d) {
                  var value = d.value.avg ? d.value.avg : d.value;
                  if (isNaN(value)) value = 0;
                  return dateFormat(d.key) + "\n" + numberFormat(value);
              })
              .ordinalColors(["orange"])
              .useRightYAxis(true)
  ])
  .yAxisLabel("Payment Volume")
  .rightYAxisLabel("Payment Amount")
  .renderHorizontalGridLines(true);

I tried the above code based on my bar chart that works with the similar code.

barChart.width(1150)
  .height(180)
  .dimension(client)
  .group(clientAmountGroup)
  .x(d3.scaleOrdinal())
  .xUnits(dc.units.ordinal)
  .margins(margins)
  .brushOn(false)
  .controlsUseVisibility(true)
  .barPadding(0.1)
  .outerPadding(0.05)
  barChart.margins().left = 50