Animated data and charts

#Data

Data is a tab under Trace from in a particle layer's Shape card, alongside the other shape sources. Type or paste your numbers into the box, then click Generate formation. Typing alone does not rebuild the shape, so you can edit the whole series before you generate.

How the numbers become a shape

• Each number is one particle, placed left to right in the order you typed them, evenly spaced.
• The value sets the height. The smallest value sits at the bottom of the chart and the largest at the top; everything else is scaled between them.
• The chart's overall size comes from Fill canvas, like any other shape.

Numbers can be separated by commas, spaces, semicolons or new lines, so a column pasted from a spreadsheet works as it is. You need at least two. Paste numbers only: any digit in a label is read as data, so "Q1" would add a 1 to the series.

Points (2 to 800) starts at the number of values, which gives one particle per number. Raise it to trace a denser line between them; the particles still keep their order from left to right. Draw-on reveal (trace the line as it plays) makes the particles appear from left to right as the scene plays.

The chart has no zero line, axis or labels. It shows the shape of the data, so put the numbers that matter in your copy or in a Counter.

Animate a change of values

On linked scenes, every scene in the chain shares one vertical scale and keeps each particle at its place in the order. Change one number on the second scene and only that particle moves up or down at the cut; the rest hold still. That turns two scenes into an animated "before and after" chart. Keep the same number of values on every scene, because a linked chain keeps the same particles on both sides of the cut.

#Chart line

A particle chart becomes a proper line chart when you connect the dots. Add the Connect / Chart card and click Connect the particles into a line. The line is redrawn through the particles on every frame, so if they move, float or change height between linked scenes, the line moves with them.

It starts as a thin line in your first brand colour, with a glow and a draw-on reveal. The controls:

• Style: Polyline (a line of even width) or Tapered ribbon (a line that changes width and colour from start to end).
• Colour, plus Colour 2 for a ribbon, from your brand palette, White or Black.
• Width (0.5 to 24), plus End width for a ribbon.
• Closed loop joins the last particle back to the first, for rings, radar shapes and gauges.
• Start idx and End idx draw only part of the range, for example to highlight the last few months.
• Glow underlay adds a soft, wide stroke under the line.

The line reveals itself from start to finish across the scene. In a linked chain it completes on the first scene and stays drawn after that, so later scenes animate the values rather than redrawing the line. It is drawn behind the particles, with straight segments between them.

Worked example

A 4:5 feed ad announcing a record quarter.

1. Add a Particles layer, open Shape, choose Data and paste 12, 15, 14, 19, 23, 28. Click Generate formation.
2. Drop Fill canvas to about 70 to leave room for the headline.
3. Add Connect / Chart, click Connect the particles into a line, and choose Tapered ribbon with a brand colour at each end and an End width of 10, so the line swells towards the latest result.
4. Set the Counter (below) to Target 28 with the Label "percent growth".
5. Add Motion with Float at a low Amount so the chart feels alive without losing its shape.

#Counter

The Counter lives in the same Connect / Chart card and draws a count-up on the canvas, in step with the chart. It has two controls:

• Target is the number it counts up to. 0 hides the counter.
• Label is a short line under the number, up to 48 characters, shown in capitals.

The number counts from 0 to the target over the scene, as a whole number with commas between thousands. It is large and bold at the top left of the frame, in your design system's light colour, with the label underneath in the chart's colour. It follows the same easing as the particles, which is the Particle ease on Ease (the Motion FX Easing before v1.990.0). Because it is worked out from the scene's progress, it scrubs cleanly and matches the render exactly.

The Counter's position, font and format are fixed. For currency, percentages or a number placed anywhere in your layout, use a string expression such as {0-12480|commas} in a text layer instead; see String expressions.