Victory Chart style the x-axis and the y-axis label independently

user_1843280 0
Viewed 3814

I am using Victory chart and I have roughly the following code

<VictoryChart domainPadding={30} {...commonProps}>
        <VictoryBar
          data={props.data}
          {...labelProps}
        />
  </VictoryChart>

I used tickLabels style {angle: 45}, however this is applied internally to both x and y axis , I want the tilted text only for the x-axis but as you can see it, it has also affected the y-axis, how can I do that?

enter image description here

victory-charts react-native reactjs node.js javascript
1 Answers

try specifying both axis in component and apply style only to one of them

<VictoryChart domainPadding={10}>
  <VictoryBar
    data={sampleData}
  />
  <VictoryAxis dependentAxis
    tickValues={[1, 2, 3, 4,5]}
  />
  <VictoryAxis
    tickValues={[1, 2, 3, 4,5]}
    style={{ tickLabels: {angle :45}}}
  />
</VictoryChart>
user_43751030
Related