Place ticks in XYChart between bars

[mn-prp]

I'm rendering a histogram, and each bar has max and min values except the left- and right-most (which have only a max and a min, respectively because they absorb all values below or above). Currently the default behavior of the XYChart is to place ticks directly below each bar. But I'd like to place one fewer tick and to have them located exactly between the bars. Is this achievable?

Right now I'm doing this with a manual bar chart not an XYChart, but it would be very nice to switch.

[nicogreenarry]

I'm using a BarGroup, not the XYChart, but maybe my solution will be helpful anyway.

First I offset the ticks using tickTransform:

<AxisBottom
  top={innerHeight + margin.top}
  left={margin.left}
  tickFormat={formatNumber}
  scale={axisBottomScale}
  tickTransform={`translate(${-innerWidth / binCount / 2})`}
  tickLabelProps={{
    fontSize: 11,
    textAnchor: "middle",
  }}
/>

Second, I had to create a second scale. Note axisBottomScale in the snippet above. I was using binScale for both my bin groups and for AxisBottom. But...well, just read my code comment on axisBottomScale:

const binScaleDomain = frequencies.map(getBinStart);
const binScale = scaleBand({
  domain: binScaleDomain,
  range: [0, innerWidth],
  padding: 0.2,
  round: true,
});
/**
 * AxisBottom naturally wants to render a tick centered under each bar group. But since this is a
 * histogram, we actually want to render ticks in between each bar, representing the thresholds
 * between the bars. So in AxisBottom, we translate the ticks left, and we need a new scale, based
 * on binScale, which includes one extra entry so we'll have an extra tick to the right of the
 * final bar group.
 */
const axisBottomScale = scaleBand({
  domain: [...binScaleDomain, binScaleDomain[binScaleDomain.length - 1] + binWidth],
  range: [0, innerWidth + innerWidth / binCount],
  padding: binScale.padding(),
  round: binScale.round(),
});

Then I had to add a bit of a right margin (I used 10px). Previously my right margin had been 0, which caused the right-most tick label to be cut off by the edge of the svg.

That worked like a charm!