Charts

Open Plugins, choose Charts, then select a plugin card, its version and a chart type from its gallery. The gallery includes vertical, horizontal and stacked bars; line and area; pie and doughnut; radar and polar-area charts. Resize the layer on the canvas. Set text color, legend and grid in Properties, then edit series, rows, values and colors directly. Advanced · edit JSON handles bulk edits or multiple series. Each dataset needs one numeric value per label and #RRGGBB colors. Add Data Binding creates a text field containing this JSON so an OGraf playout can replace chart values through ordinary data updates. The standalone Chart.js plugin provides these chart types; other compatible providers can be installed separately. The exact selected renderer is embedded in exported graphics.

Chart animation

Use Animation in the chart's Properties to choose Grow, Reveal, Fade or None. New charts use Grow. Set duration and start delay in frames; Grow's stagger delays consecutive items. For example, a duration of 25 frames lasts one second in a 25 fps project. Choose easing to shape the motion. Replay on data update replays the animation when playout sends changed chart data. Timeline playback, scrubbing and OGraf preview use the same animation timing; native Studio keyframes can also move or fade the whole layer.

Bars and slices animation

For plugin motion on individual bars or slices, select Chart.js renderer 1.3.1 (or a provider declaring mark-animation-v1), then expand Bars / slices animation in the chart's Properties. Choose an installed animation pack preset separately for In and Out. Set Duration, Delay and Stagger in frames, adjust its numeric controls, then press Apply. Clear removes only that side. Duration plus delay and the full staggered sequence must fit the template's In or Out window; lengthen that window in Timeline if needed.

Each vertical/horizontal bar, stacked segment, pie/doughnut slice or polar-area sector moves independently. Stagger runs through each dataset in order. Value labels follow their marks; axes, category labels, grid and legend remain stationary. Gradients, shaders and media fills keep following the moving mark shapes. An In preset replaces the chart's built-in entrance; normal data-update animation remains available without restarting the mark entrance. Animate In / Out still controls the whole chart separately. Line, area and radar marks do not support these presets. Projects retain exact animation definitions; exports bake numeric curves, so playout needs no installed animation pack. Existing charts keep their pinned renderer until you explicitly change it.

Renderer 1.3.1 keeps chart axes, labels and painted marks aligned when the editor is zoomed or the preview is fitted to a different size. Install the updated plugin, then select it in the chart's Renderer control; installing alone does not change existing chart pins.