Building graphs in Jetpack Compose with Canvas
summary
Builds custom line and bar charts with Jetpack Compose Canvas using a composable base that computes coordinates and accepts pluggable draw lambdas via the strategy pattern. Implements a scrubber, moving labels and highlighting by splitting drawing into separate canvases to avoid full recomposition; initial work exposes a recomposition bug at about 1000 points but 80% of app charts now use the new framework and the approach proves performant and extensible.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 1:05What is Jetpack Compose
- 2:06Why build custom charts
- 7:29Basic line chart tutorial
- 9:14Third party vs custom solution
- 11:43Designing the charting framework
- 16:20Architecture with strategy pattern
- 17:02Implementation at Fundrise
- 18:27Performance optimizations
- 19:56Recomposition tricks
- 20:16Accessibility and testability
- 21:42Handling chart behaviors
- 23:30Lessons learned and summary
- 24:53Takeaways and resources
- 25:56Q&A
related talks
43mInteracting with Composable Canvas
31mComposing in your Canvas!
20mCustom layouts and graphics in Compose
36mJetpack Compose: Drawing without pain and recomposition
39mJetpack Compose: Drawing without pain and recomposition
32mThinking outside the Box: Custom Compose layouts
36mPractical implementations of powerful UI expressions using Jetpack Compose
32mJetpack Compose for Games & Animations