Chart/Graph Animation Implementation in Mobile Apps
A static chart is just data. An animated one is a story. When bar columns rise bottom-to-top sequentially, line chart "draws" left-to-right on screen load, users journey through data rather than just reading numbers. But this effect requires non-trivial technical work.
Implementation Approaches
First question: use ready library or write on Canvas/Core Graphics?
Libraries:
- iOS: Charts (DGCharts), SwiftCharts (native, iOS 16+)
- Android: MPAndroidChart, Vico
- Flutter: fl_chart, syncfusion_flutter_charts
- React Native: Victory Native, react-native-chart-kit
Libraries give 80% needed in 20% time, but animation customization is limited. MPAndroidChart supports animateX() and animateY(), but tweaking easing per-bar or stagger animation (columns appear sequentially)—impossible without custom Renderer.
Custom Canvas is needed when: non-standard chart type, stagger effect, animating individual points per data, interactive tooltip with animation.
Stagger Animation for Bar Chart
On Flutter via AnimationController + Interval:
// Each bar animates with 80ms delay
for (int i = 0; i < bars.length; i++) {
final start = (i * 0.08).clamp(0.0, 1.0);
final end = (start + 0.4).clamp(0.0, 1.0);
animations[i] = Tween(begin: 0.0, end: bars[i].value).animate(
CurvedAnimation(
parent: controller,
curve: Interval(start, end, curve: Curves.easeOutCubic),
),
);
}
On iOS via CAKeyframeAnimation with keyTimes—each CAShapeLayer (one bar) gets offset beginTime:
bars.enumerated().forEach { index, layer in
let anim = CABasicAnimation(keyPath: "bounds.size.height")
anim.beginTime = CACurrentMediaTime() + Double(index) * 0.08
anim.duration = 0.4
anim.timingFunction = CAMediaTimingFunction(name: .easeOut)
layer.add(anim, forKey: nil)
}
Line Chart Animation: strokeEnd
Line chart draws via CAShapeLayer with strokeEnd: 0 → 1. Adding point markers appearing as "brush" passes requires syncing marker appearance with strokeEnd progress. Implement via CAAnimationDelegate.animationDidStop per segment or via displayLink tracking presentation().strokeEnd.
Interactive Tooltip
Tooltip following finger across chart is separate task. On iOS: UIGestureRecognizer → recalculate coordinate to data value → UIView.animate for tooltip. Important: use setNeedsDisplay() only on CALayer portion where highlight line draws—full canvas redraw kills FPS on fast finger movement.
Process
Receive data format and Figma chart design. Determine implementation type: library or custom Canvas. Build base render → add appearance animation → test performance via Instruments / Android Profiler (goal: 60fps any dataset size). On large datasets (500+ points), must apply Ramer–Douglas–Peucker downsampling.
Timeline: 1–3 days depending on type and chart complexity.