Oli Legat

At first glance, building a pinch-to-zoom and pan component in React seems simple. After all, the browser’s gesture events are already there. But when you need realistic, design-friendly motion and the ability to zoom axes independently, the problem gets much trickier. In this talk, I’ll share how we approached this challenge in our AG Charts React component: from the pitfalls of naïve implementations, to the realisation that pan and zoom are mathematically identical problems. You’ll see how some pen & paper algebra unlocked a precise and intuitive gesture system where X and Y scales update independently—kept in sync with React state—delivering smooth interactions beyond what you get in maps or images.

Thinking of using <canvas> to render your UI? Great idea! But let’s make it accessible. Learn how to leverage the DOM tree structure to allow users to interact with your canvas using the keyboard and a screen reader. Find out about tricky gotchas and how to work around these.