[xy-chart] How to make axis labels vertical or angled somehow?

[RIP21]

I have an XYChart and some may get pretty loaded with ticks. I guess I can just divide by the length of dataset to show no more than 10 or 20 or whatever.
But is it possible maybe to draw these ticks vertically? Or maybe stack them so they fit like that

thing         thing
       thing        thing

That's the code of mine.

import React, { useEffect, useMemo } from 'react'
import {
 lightTheme,
 darkTheme,
 Grid,
 AreaSeries,
 Axis,
 XYChart,
 Tooltip,
} from '@visx/xychart'
import { curveCardinal } from '@visx/curve'
import { ParentSize } from '@visx/responsive'
import { Box, useColorMode } from '@chakra-ui/react'
import { MetricHistoryPoint } from '__generated__/graphql-types.generated'

const dateScaleConfig = { type: 'band', paddingInner: 1 } as const
const moneyScaleConfig = { type: 'linear' } as const

export const DashboardGraph = ({ data }: { data: MetricHistoryPoint[] }) => {
 const config = useMemo(
   () => ({
     x: dateScaleConfig,
     y: moneyScaleConfig,
   }),
   [],
 )
 const { colorMode } = useColorMode()
 const theme = colorMode === 'light' ? lightTheme : darkTheme

 useEffect(() => {
   setTimeout(() => {
     window.dispatchEvent(new CustomEvent('scroll'))
   }, 300)
 })

 return (
   <ParentSize>
     {({ width }) => (
       <XYChart
         theme={theme}
         xScale={config.x}
         yScale={config.y}
         height={300}
         width={width}
       >
         <Grid rows columns={false} strokeDasharray="10, 5" />
         <AreaSeries
           dataKey="Cash in"
           data={data}
           xAccessor={(it) => it.date}
           yAccessor={(it) => it.value}
           fillOpacity={0.4}
           curve={curveCardinal}
         />
         <Axis orientation="bottom" strokeWidth={0} />
         <Axis orientation="left" />
         <Tooltip<{ date: string; value: number }>
           showVerticalCrosshair
           snapTooltipToDatumX
           snapTooltipToDatumY
           showSeriesGlyphs
           renderTooltip={({ tooltipData }) => (
             <Box>
               {tooltipData?.nearestDatum?.datum
                 ? tooltipData?.nearestDatum.datum.value
                 : '–'}
               $
             </Box>
           )}
         />
       </XYChart>
     )}
   </ParentSize>
 )
}

Also, is using paddingInner is okay to get rid of padding? :D Because I have it as 1 only to have the graph started from the very left side and goes all the way to the right side.
It's a bit counter-intuitive as I think as more you have as more padding you have, but it's kinda another way around.

I wasn't able to find good docs with examples regarding xScale and yScale configs and what they are and what are they doing.
I just copy-pasted and cleaned up your XYChart example.

[williaster]

Hey @RIP21, good questions. These parts of XYChart actually map pretty cleanly to other visx packages, let me take your questions one by one.

I guess I can just divide by the length of dataset to show no more than 10 or 20 or whatever.

To reduce ticks, you can use Axis numTicks: number (which is approximate! due to the underlying d3 algorithm), you can specify exact tick values you want via tickValues: TickValue[], or you could render all ticks and simply render no label for some of them (e.g., every other). To do the latter you would use tickFormat (see demo in next question).

But is it possible maybe to draw these ticks vertically? Or maybe stack them?

The prop you're looking for here is tickLabelProps. It is a function which passes you a tick value and its index, and takes any @visx/text <Text /> props in return: TickLabelProps<T> = (value: T, index: number) => Partial<TextProps>.

Here is a modified axis demo showing how you can change angle, or stagger the ticks vertically using dy based on tick index.

Is using paddingInner is okay to get rid of padding? I wasn't able to find good docs with examples regarding xScale and yScale config.

We should improve these docs, these configs are hard to understand if you aren't intimately familiar with d3 scales. The config options map exactly to the @visx/scale package. Those docs also link to the d3-scale docs, which elaborate more on things like padding. Just to answer your specific question about padding, here is an image from the d3-docs for band type scales. The definition of padding is:

The inner padding specifies the proportion of the range that is reserved for blank space between bands; a value of 0 means no blank space between bands, and a value of 1 means a bandwidth of zero.
The outer padding specifies the amount of blank space, in terms of multiples of the step, to reserve before the first band and after the last band.

If you want the first/last points to lie on the edge of the graph, I would set paddingOuter: 0 (leaving space between points unchanged).

Hope that helps, lmk if you have follow up questions 👍

[RIP21]

Awesome answer. Super clear!

[VigneshTrantor]

Thank you

[andrewfschorr]

Hi @williaster this seems to work well when the xScale is changed to include { type: 'band'}, however my x axis is type: 'time'` which doesn't seem to let respect the paddingOuter values. Is there a way to ensure that the first and last ticks are on the edges of the graph for an XYChart for a chart with time scale on the x axis?