score:0

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)",
    },
  }}
/>

score:1

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);
  }
}

Related Query

More Query from same tag