Axis labels are getting clipped even after using nice

[shirshendubhowmick]

I am getting clipped axis babel for a specific time period even after using nice: true

For different time periods the chart is getting rendered nicely

Any suggestion on what might be wrong here ?

This is how my timeScale looks like

const xMax = (props.parentWidth as number) - margin.left;

 scaleTime<number>({
   domain: [
     Math.min(...processedChartData.map(getDate)),
     Math.max(...processedChartData.map(getDate)),
   ],
   nice: true,
   range: [0, xMax],
 })

[williaster]

Hey @shirshendubhowmick 👋 thanks for checking out visx. I think your ticks are getting clipped because of the margin that you have set for your chart. nice has nothing to do with rendering, only the computation of tick values. From the d3-scale docs:

[nice] Extends the domain so that it starts and ends on nice round values.

Compared to HTML where you can make overflow visible, SVG content will get clipped if the container is not big enough (you can use dev tools to inspect where the bounds of the SVG are). So for your case I would either

• increase the right margin of the chart so it's not clipped, or
• right-justify the last tick using tickLabelProps to set textAnchor: 'end'

Hope that helps!