Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VictoryBar animation doesn't work for named x and y axis #444

Closed
CakeBrewery opened this issue Dec 7, 2016 · 1 comment · Fixed by FormidableLabs/victory-chart#419
Closed

Comments

@CakeBrewery
Copy link

VictoryBar components with custom axis names don't animate.

Animation doesn't work in the following code. I added animate={{duration: 500}} to the "Getting Started with Victory" example, which names the y axis as "earnings"

const data = [
  {quarter: 1, earnings: 13000},
  {quarter: 2, earnings: 16500},
  {quarter: 3, earnings: 14250},
  {quarter: 4, earnings: 19000}
];

class App extends React.Component {
  render() {
    return (
      <VictoryChart
        // adding the material theme provided with Victory
        theme={VictoryTheme.material}
        domainPadding={20}
        animate={{duration: 500}}
      >
        <VictoryAxis
          tickValues={["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"]}
        />
        <VictoryAxis
          dependentAxis
          tickFormat={(x) => (`$${x / 1000}k`)}
        />
        <VictoryBar
          data={data}
          x="quarter"
          y="earnings"
        />
      </VictoryChart>
    )
  }
}

Removing the "earnings" name off the y axis fixes the issue and the animation works again.

const data = [
  {quarter: 1, y: 13000},
  {quarter: 2, y: 16500},
  {quarter: 3, y: 14250},
  {quarter: 4, y: 19000}
];

class App extends React.Component {
  render() {
    return (
      <VictoryChart
        // adding the material theme provided with Victory
        theme={VictoryTheme.material}
        domainPadding={20}
        animate={{duration: 500}}>
      >
        <VictoryAxis
          tickValues={["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"]}
        />
        <VictoryAxis
          dependentAxis
          tickFormat={(x) => (`$${x / 1000}k`)}
        />
        <VictoryBar
          data={data}
          x="quarter"
        />
      </VictoryChart>
    )
  }
}
@boygirl
Copy link
Contributor

boygirl commented Dec 8, 2016

@CakeBrewery and @Zerim thanks for catching this! I'll publish the fix as a patch tonight.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants