React-vis: Adjust tick labels position

[WaldoJeffers]

Hello,

Is it possible to adjust the tick labels' position along an axis ? For example, I'd like to position my labels above the X axis, and on the right side of the Y axis without moving the axis themselves, to display a more "compact" graph, like this:

I saw in the docs that the tick labels' angle can be adjusted, but haven't found a way to adjust their position. If this is not currently possible, I think it would be an interesting feature, since "compact" graphs are popular in dashboards.

[samhogg]

Hey @WaldoJeffers - to do this you can use a negative tickPadding value. This doesn't work too well in conjunction with the tickLabelAngle param at the moment though, perhaps there's room for a PR there.

[WaldoJeffers]

Thanks @samhogg, this is working as intended. I tried it in conjunction with the tickLabelAngle param (though I don't need it), and it works, even if the labels are slightly offset.
Now, is there any way to make sure labels at the beggining & end of the axis are rendered inside the graph area only ? Currently, long labels can overflow:

[samhogg]

@WaldoJeffers that gets a little more complicated. Have you tried experimenting with the tickValues or tickTotal attributes?

It really depends what your desired behaviour is...

a) don't display end ticks, or
b) align end tick labels such that they are within the bounds of the chart

My preferred approach would be the former, and use some form of interactivity (e.g. the Hint component) to show users data points at a more fine grained level.

[WaldoJeffers]

@samhogg Haha sorry I'm know I'm pushing it. My desired behaviour is b) align end tick labels such that they are within the bounds the chart

I've experimented with the tickValues and tickTotal attributes. Here's what I found for anyone interested. The tickTotal attribute is useless in this case, as reducing its value only removes ticks in the middle of the axis. However, the following code removes the start & end ticks <XAxis tickValues={data.slice(1, -1).map(record => record.x)} />

The VictoryCharts library also has an interesting attribute: crossAxis, which removes the first ticks of both axis if they cross.

[akindr]

Another approach is to use CSS selectors to position the first / last tick values. I've done something similar on a chart to move the first y-tick up and last y-tick down. Something like this (you may have to tweak pixel values depending on your styles):

     .rv-xy-plot__axis__tick:last-of-type {
       text {
         transform: translate(-8px, 5px);
       }
     }

     .rv-xy-plot__axis__tick:first-of-type {
       text {
         transform: translate(-8px, -5px);
       }
     }

Where the .rv-xy-plot__axis__tick is the defined CSS style for the ticks. Granted this relies heavily on knowing the CSS names, which may change, but should get the job done.

[thngdude]

Is there a way to offset the Y position of the labels, so the labels on the Y axis are inside the chart and below the horizontal gridlines?