xAxis labels render on each other

When the graph is small and there are many ticks, some labels are rendered over each other

I see tickTotal is hard coded according to the width of the graph. I can set the tickTotal manually, but ideally I want it to be set automatically with any given data. Is there a recommended way to handle that case?

https://codesandbox.io/s/0owow0zpkp

(first graph has xType=“time”)

UPDATE:

Just found out I can use tickLabelAngle and increase bottom margin. Is this the best approach?

[mcnuttandrew]

I think there might another margin you don’t know about! Adding margin in style can be helpful, although it just adds margin around the inner svg. If you want to add internal margin, ie within the svg, you need to use the margin prop on the plot itself. (See https://uber.github.io/react-vis/documentation/api-reference/xy-plot for more). So your component might become something like

 <FlexibleWidthXYPlot
        height={size}
        xType={'ordinal'}
        yDomain={[0, data.outstanding]}
        margin={{bottom: 50}}
      >
    ....
   </FlexibleWidthXYPlot>

[mcnuttandrew]

Just found out I can use tickLabelAngle and increase bottom margin. Is this the best approach?

that is 100% what i would recommend. did that end up working out for you?