XYChart with scaled time Axis

[shockhs]

Can I have bottom axis in XYChart with scaled date ticks like in Brush chart?

https://airbnb.io/visx/brush

I have this code in my project and it doesn`t work

  const dateScale = useMemo(
        () => {
            const dataValues = []

            series
                .filter((i) => i.componentType === COMPONENT_TYPES.series)
                .forEach((i) => dataValues.push(...i.data.map((j) => (isHorizontalGraphic ? j.value : j.x))))

            return scaleTime({
                range : [0, width],
                domain: extent(stock, getDate)
            })
        },
        [series, width]
    )


<Axis
      animated={animated}
      tickComponent={getTickComponentText}
      scale={dateScale}
      xScale={dateScale} // both doesn`t work
      key={`x-axis-${animationTrajectory}-${renderHorizontally}`}
      orientation={renderHorizontally ? yAxisOrientation : xAxisOrientation}
      numTicks={ticksNumber}
      animationTrajectory={animationTrajectory}
 />

[williaster]

Hey @EsaxCO, in @visx/xychart you shouldn't be passing/computing scale to the Axis component yourself (only if you are separately using the @visx/axis packages. XYChart computes the scales based on child series data, and scales are determined by the xScale/yScale config you pass the XYChart component itself. You can check the https://airbnb.io/visx/xychart codesandbox for implementation details. All scale config maps to @visx/scale package's config.

[shockhs]

Thank you!

[Ding-Fan]

A fast way to "auto scale" in XYChart:

import { ParentSize } from '@visx/responsive'
//...
// use ParentSize to provide 'width'
        <ParentSize>
          {({ width, height }) => {
            return (
//...
      <Axis
        key={'date'}
        orientation="bottom"
        numTicks={width > 520 ? 7 : 3}
      />