Question

173

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

rated 0 times [ 179] [ 6] / answers: 1 / hits: 5599 / 4 Years ago, wed, july 22, 2020, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

erinh

Add To Favorites

Follow

Total Points: 38

Total Questions: 100

Total Answers: 110

Location: Macau

Member since Mon, Nov 16, 2020

4 Years ago

erinh questions

1 Check if input field is changed

Mon, Nov 16, 20, 00:00, 4 Years ago

1 Why is optional chaining not working in my Node REPL?

Sat, Sep 19, 20, 00:00, 4 Years ago

1 React-hook-form with Chakra UI not displaying validation error message in NextJS

Sun, Sep 6, 20, 00:00, 4 Years ago

1 Why is my Async function returning Uncaught TypeError: (intermediate value) is not iterable

Thu, Jul 23, 20, 00:00, 4 Years ago

1 Bootstrap accordion not working in angular 9

Mon, Apr 13, 20, 00:00, 4 Years ago

View All

answered 4 Years ago corie · Accepted Answer

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>