CODEWITHSUNDEEP
react-nativevictory-charts
John
John

Reputation: 527

Victory Charts cuts off tick labels when angled

(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.

Upvotes: 2

Views: 1881

Answers (1)

Nima N
Nima N

Reputation: 81

I didnt find an automatic solution to your problem

but mannualy adding "padding" prop to the chart worked for me

btw this solution is for VictoryNative on react native but I guess something similar works on react.js version too

check the 'padding' prop here

        <VictoryChart width={400} theme={VictoryTheme.material}
    padding={{bottom:100,right:50,left:50}}
    >
        
        <VictoryAxis  //the x axis
        // axisLabelComponent={<VictoryLabel angle={-90}/>}
        tickLabelComponent={<VictoryLabel angle={-90} dy={-7} 
        textAnchor='end'
        // labelPlacement="perpendicular"
         />}
        /> 
        <VictoryAxis  dependentAxis //the y axis
        />

Upvotes: 1

Related Questions