Victory Charts cuts off tick labels when angled

Viewed 101

(Edit: I also tried putting overflow: 'visible' in various locations to no avail.)

I'm using a date for the x-axis tick labels so I would like them to be at an angle to prevent overlap. The issue is that they are not being cut off at the bottom, as seen here (the colors are there to show different component edges):

enter image description here

Here is my code:

<View style={{ backgroundColor: 'red', paddingBottom: 50 }}>
<VictoryChart
  theme={chartTheme}
  width={screenWidth - 10}
  animate={{
    onLoad: { duration: 100 },
    duration: 500,
  }}
  containerComponent={<VictoryContainer style={{ backgroundColor: 'blue', paddingBottom: 50 }} />} >
  <VictoryAxis
    label={plotText.xLabel}
    style={{ // adding padding here does nothing
      tickLabels: { angle: -45, textAnchor: 'end' } // adding padding here does nothing
    }}
    tickValues={dispRSHistData.ticks}
    tickFormat={(t) => getFormattedDate(t)}
  />
  <VictoryAxis
    dependentAxis
    label={plotText.yLabel} />
  <VictoryLine
    data={dispRSHistData.data}
    x="timestamp"
    y="percentSuccess"
    style={{ data: { stroke: "tomato" } }}
    size={10} />
</VictoryChart>
</View>

I've tried setting various heights manually but nothing seems to give space to show the full tick labels.
0 Answers
Related