Black Lives Matter. Please consider donating to Black Girls Code today.

Creating animated line chart

I want to create animated line chart.
So, I have a datasets: some countries, x-axis - years from 1980 to 2017, y-axis - some country features, which depend on x-axis (years). Something like this, but only line chart with several lines (countries). And I have some questions:

  1. When I create not animated line chart, figure[‘data’] is our data (lines). But when I create animated line chart, what information figure[‘data’] should contain? For data we use figure[‘frames’]. Am I right?
  2. Due to not enough x points my animated line chart is not enough smoothed. Is there a way to make it smoothed without adding new intermediate points?
  3. Question about frames. Well, let’s say I have only one line and points for line: (x_1, y_1), (x_2, y_2),…,(x_n, y_n). Am I rights that my frames will be something like this: [x_1, y_1)]. [(x_1, y_1), (x_2, y_2)], [(x_1, y_1), (x_2, y_2), (x_3, y_3)],… How it is implemented in library? Every frame my line will be regenerated or not?

P.S. My raw line chart.

Hi @Sushentsev,

  1. figure['data'] should contain the traces you want the animation to start with (before pressing play). This can be equal to the traces in your first frame.
  2. You can set the scatter.line.shape property to spline to create a spline interpolation between point. See
  3. Yes, you’re correct. Each frame must include the full definition of the line that the frame should display. The fill line is regenerated for each frame.

Hope that helps!

  1. OK, where should I set line properties (name, width, shape)? In ‘data’ or in ‘frames’?
  2. Well, It works for not animated line chart but I need to make “picture” smoother when frames are changed.
  3. OK.


Hi @Sushentsev,

  1. I’d recommend setting these properties in both data and frames.