Update animations w/ react-plotly

[BG687]

I would like to animate my stacked area chart when the data updates (so the transition from the old data to the new data is smooth). Right now, when the data updates the chart just instantly changes to reflect the new data.

I don't see an animate function on the Plotly react component or its prototype. What is the best way to go about animating these charts? Is this possible?

Thanks

[nicolaskruchten]

This isn't currently possible within react-plotly.js but we're working on adding support for it in the underlying plotly.js library: plotly/plotly.js#1849

[GrahamWilsdon]

@nicolaskruchten any update on this?

[dmt0]

@GrahamWilsdon Some transitions are possible now, see the info in the PR that closed the mentioned issue: plotly/plotly.js#3217 (comment)

[billyhunt]

Are bar chart animations available? I was having trouble getting one to work.

I am doing something like

const HistogramComponent: FunctionComponent<{
  timeAggregation: any
  unitOfTime: any
}> = () => {

  const determineTickFormat = (interval: UnitOfTime) => {
    let tickFormat = '%y/%m'

    switch (interval) {
      case 'daily':
        tickFormat = '%d/%m/%Y'
        break
      case 'weekly':
        tickFormat = '%m/%Y'
        break
      case 'monthly':
        tickFormat = '%b %Y'
        break
      case 'yearly':
      default:
        tickFormat = '%Y'
        break
    }
    return tickFormat
  }

  let data: Partial<PlotData>[]
  let layout = {}

  const transition = {
    duration: 2000,
    easing: 'cubic-in-out'
  }

  const layout = {
    autosize: true,
    transition,
    margin: {
      l: 30,
      r: 30,
      b: 30,
      t: 15
    },
    font: {
      family: 'Heebo, Overpass, sans-serif',
      color: theme.fgGrey
    },
    xaxis: {
      ticklen: 5,
      tickwidth: 1,
      tickcolor: theme.fgGreyLight,
      ticks: 'outside',
      lineWidth: 1,
      fixedrange: true // disables zooming on x axis
    },
    yaxis: {
      lineWidth: 1,
      zerolinecolor: theme.fgGreyLight,
      fixedrange: true // disables zooming on y axis
    }
  }

  return (
    <StyledPlot
      data={data}
      layout={layout}
      useResizeHandler={true}
      config={config}
    />
  )
}

[nicolaskruchten]

No, bar chart animations are not merged yet... coming soon!

[CarlosAmaral]

@nicolaskruchten Do we already have Bar chart animations?

[nicolaskruchten]

Bar chart transitions are supported in recent versions of Plotly.js, yes.

[CarlosAmaral]

@nicholas-esterer I used the same code as @billyhunt. Didn't work. Do you have an example that you can share? Thank you!

[nicolaskruchten]

@CarlosAmaral which version of plotly.js are you using? Try 1.54.2 :)

[CarlosAmaral]

@nicholas-esterer I did that. Same outcome. No animation.

[nicolaskruchten]

Can you provide a full running example in a codepen or something for me to help you debug?

[qidian99]

Is there any example of animating the scatter plot?

[CarlosAmaral]

@nicolaskruchten https://264b4.codesandbox.io/ sorry for the delay

[nicolaskruchten]

@CarlosAmaral thanks! What part of this is meant to be animated?

[CarlosAmaral]

Thank you, @nicolaskruchten. Good question, the bars going up for example?