{"id":18985,"date":"2025-03-05T10:08:30","date_gmt":"2025-03-05T10:08:30","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=18985"},"modified":"2025-03-05T10:08:30","modified_gmt":"2025-03-05T10:08:30","slug":"pinch-to-zoom","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2025\/03\/05\/pinch-to-zoom\/","title":{"rendered":"Pinch-to-Zoom in Stock Charts \u2014 JS Chart Tips"},"content":{"rendered":"

\"A<\/a>Stock charts<\/a> are designed to handle large volumes of time-based data, and smooth navigation is key to working with them effectively. One common need is zooming \u2014 whether to focus on a specific time range in greater detail or to get a broader view of the data.<\/p>\n

In our JavaScript stock charts<\/a>, zooming works out of the box through the scroller<\/a> element, which appears by default as the main navigational UI control, making it easy to adjust the visible range on the go. For even greater flexibility, the range selection UI<\/a> provides extra tools like preset time period buttons and date input fields. You can also activate zooming via mouse wheel scrolling with the zoomOnMouseWheel()<\/a> method, which corresponds to the two-finger swipe gesture on touchpads and trackpads.<\/p>\n

Pinch-to-zoom is another intuitive zooming option. It allows users to zoom in and out naturally on mobile and touch devices by moving two fingers farther apart or closer together. This is also easy to implement \u2014 and it is exactly what we cover in this edition of JS Chart Tips<\/a>. Learn how to add pinch-to-zoom to your JavaScript stock chart!<\/p>\n

<\/p>\n

Question: How to Add Pinch-to-Zoom to JavaScript Stock Chart?<\/h2>\n

Recently, our Support Team<\/a> received several questions about enabling pinch-to-zoom in our JavaScript stock charts<\/a>. Since this feature provides a smooth and intuitive way for users to zoom in and out of time-based data using familiar gestures \u2014 particularly on mobile \u2014 we figured it would be helpful to share the solution publicly, not just with those who reached out.<\/p>\n

Here is an animation showing the pinch zoom behavior we are talking about \u2014 zooming in or out of the timeline with a simple two-finger pinch gesture:<\/p>\n

\"Pinch
\nSo, how exactly can you add pinch zooming? Let us show you! Below, we will walk you through how to enable pinch-to-zoom functionality in a stock chart using JavaScript.<\/p>\n

Solution: Implementing Pinch Zoom in JS Stock Charts<\/h2>\n

Overview<\/h3>\n

Pinch-to-zoom essentially mirrors the behavior of holding Ctrl (or Cmd on Mac) while scrolling the mouse wheel. So, the solution involves capturing mouse wheel events triggered when the user scrolls while holding Ctrl\/Cmd, preventing the default browser behavior (which would otherwise zoom the page), and dynamically adjusting the chart\u2019s visible range by updating the X-axis scale.<\/p>\n

This approach provides smooth, intuitive zooming \u2014 whether users scroll while holding Ctrl\/Cmd or perform a pinch gesture.<\/p>\n

Now, let\u2019s see how this can be implemented with just a few lines of code.<\/p>\n

In Detail<\/h3>\n

First, assuming you have already created a stock chart<\/a>, access the container where the chart is rendered. You can do this by selecting the container element using document.getElementById<\/code>:<\/p>\n

var container = document.getElementById(\"container\");<\/code><\/pre>\n
Second, add an event listener to detect when the user scrolls while holding Ctrl (or Cmd on Mac). This is done using the mousewheel<\/code> event:<\/p>\n
container.addEventListener(\"mousewheel\", function(e) {\r\n  \/\/ ensure zooming only happens when Ctrl (or Cmd on Mac) is pressed\r\n  if (e.ctrlKey) {\r\n    \/\/ prevent the default browser zoom behavior\r\n    e.preventDefault();\r\n    \/\/ zoom logic will go here\r\n  }\r\n});<\/code><\/pre>\n
Third, once a zoom event is detected, dynamically update the X-axis scale to zoom in or out by adjusting the visible range:<\/p>\n
\/\/ retrieve the x-axis scale\r\nvar xScale = chart.xScale();\r\n\r\n\/\/ get the current visible range\r\nvar max = xScale.getMaximum();\r\nvar min = xScale.getMinimum();\r\n\r\n\/\/ calculate the current range\r\nvar gap = max - min;\r\n\r\n\/\/ update the range dynamically\r\nchart.selectRange(min - gap * e.deltaY \/ 200, max + gap * e.deltaY \/ 200);<\/code><\/pre>\n
That is basically it \u2014 your stock chart now supports pinch-to-zoom behavior.<\/p>\n
For reference, here is the complete code, combining all the steps above:<\/p>\n
var container = document.getElementById(\"container\");\r\ncontainer.addEventListener(\"mousewheel\", function(e) {\r\n  if (e.ctrlKey) {\r\n    e.preventDefault();\r\n    xScale = chart.xScale();\r\n    max = xScale.getMaximum();\r\n    min = xScale.getMinimum();\r\n    gap = max - min;\r\n    chart.selectRange(min - gap*e.deltaY\/200 , max + gap*e.deltaY\/200);\r\n  }\r\n});<\/code><\/pre>\n
Example<\/h3>\n
Check out an example of a stock chart with pinch-to-zoom, and feel free to experiment further with its code and visualization:<\/p>\n
    \n
  • Stock Chart with Pinch-to-Zoom | AnyChart Playground<\/a><\/li>\n<\/ul>\n
    \"A<\/a><\/p>\n
    Further Learning<\/h2>\n
    Learn more in our JavaScript charting documentation:<\/p>\n
      \n
    • Stock Charts | AnyChart JS Documentation<\/a><\/li>\n
    • Event Listeners | AnyChart JS Documentation<\/a><\/li>\n<\/ul>\n
      Wrapping Up<\/h2>\n
      Now you know how to add pinch-to-zoom support to your JavaScript stock chart, making navigation even more intuitive with familiar touch gestures and scroll actions.<\/p>\n
      Keep following the JS Chart Tips<\/a> series for more practical solutions inspired by real-world cases and feature requests from our customers<\/a>. If you have any questions or need assistance, our Support Team<\/a> is always ready to help.<\/p>\n
      Enjoy smooth zooming into your data with our JavaScript charts<\/a>!<\/strong><\/p>\n