react-vis - align x-axis ticks with start and end of bars

Question

I am trying to shift the x-axis ticks so that they are aligned with each bar rect. The idea is that the bars correspond to an event between the hours of x - y and the ticks are a little mis-leading. I've tried to use tickFormat() but that seems to only effect the labels. I've also looked through the D3 docs as the react-vis docs mention them quite a bit.

current chart

So ideally the bar that is centered on the 10am position would be shifted to the right so its centered between 10am - 11am. Is there another function that I can use to accomplish this?

Answer 1

Using @Justin's answer above, I was able to nudge my XAxis labels using transform like so:

<XAxis
  tickLabelAngle={-45}
  style={{
    text: {
      stroke: "none",
      fill: "#FF0000",
      fontSize: 10,
      fontWeight: 100,
      transform: "translate(10px, 0)",
    },
  }}
/>

Answer 2

I was able to accomplish this after looking through all of the open issues on the react-vis repo. Luckily in my case there would always be a set number of points so this fix will work but if your ticks are dynamic you would need to calculate the amount to move the ticks. In my case there are 24 total ticks and the width of the chart is 962px so each tick is about 40 pixels apart. To shift each tick over half way translate the x location by half of the width between each tick (minus 1 to account for the 1px width of the tick line itself). Also had to shift the text down because once I messed with the transform it cleared the existing transform added by the library. Not the best but hopefully this will help someone in the future.

.rv-xy-plot__axis__tick {
  line {
    transform: translate(-19px, 0);
  }
  text {
    transform: translate(-19px, 14px);
  }
}