I am working on a project that has histogram charts displayed to the user. After the first draft, the client made a request for more granularity. So in a histogram that looks something like this

Original charts

They want to be able to see smaller increments if the desire

Small increments

Currently, the implementation of getting these smaller increments involves using the scrollwheel to hover over the histogram, and zoom in (scroll towards the screen) and out (scroll away from the screen). I don't think this is a very good way to do it, because if someone doesn't have a scroll wheel, they can't get that granularity they desire. I would like to do something with input boxes, where the user can put in their own range and get a histogram with that range.


Since there are multiple histograms though, this might get cluttered with all the input boxes floating around.

What would be the best approach to give the customer the granularity they want while still maintaining good UX principles?

2 Answers 2


Although @locationunknown has provided one way of doing it, I am not sure how practical or required it would be for your purpose. That approach is widely seen in movie, audio editors where you need to dive deep down to edit bits and pieces and then zoom out to see the effect on a larger scale. Definitely it will provide you highest level of control on your zoom level.

I have seen a more simpler implementation on many stock market related websites. They offer you buttons for steps on axis. If required they also offer a drawn out control to modify the time period manually.

As done on Yahoo Finance

The Green box offers granular control where as the orange box is a time period stepper.

Apart from UI is also depends on how your target user is going to use it. How frequently he is going to change these steps. Does he need specific level of support or is s/he after certain stepping points.

Also, you might have to look at the technical feasibility of the approach you take. Fetching data from server if user manually changes the period would probably introduce delays. So even after giving detailed info usability might still degrade for totally different reason.


The one I'd use would be similar to the reputation bar chart that can be found in our profiles here in SE.

Though I would add finer controls than just drawing the area every time. Drawing the area is fine but with adjustable end points and draggable selection.

Ableton is using a similar concept on their Live software, as seen in this video: https://www.youtube.com/watch?v=L7Jazy_7tt4&t=173

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.