[Design] Zoom bar

[cameroncalder]

Sketch file: https://ibm.box.com/s/v1a237v2r2y3wt5tstupbwrdx8udbv23

[lukefirth]

Hey 👋 I'm curious with the zoom bar decision here to place it on the top above the chart.

While I understand it from a traditional hierarchy standpoint (things above usually control what's beneath). Out there in the world, I've found that the zoom bar is nearly solely located beneath the primary chart as a standard, and would, therefore, suspect that most users would come to our charting with that as an expectation. A quick google search around zoom bar, chart zoom and pan etc only seems to come up with examples like this too.

If there's some rationale / guidance you could provide on the decision to depart from that, it would be super appreciated!

[cameroncalder]

Hey @lukefirth, we explored both options but ultimately landed above for a few reasons.

• The hierarchy, as you stated, makes sense placed above since the zoom bar controls the chart canvas beneath. It's also much more contextually placed with the chart instead of being placed beneath the x-axis, especially since our chart components come with a possible 2nd line x-axis label. This space where the x-axis resides creates an undesirable gap between the zoom bar controller and the chart canvas.
• We didn't want the zoom bar to either push down or compete with the default placement of the legend.
• From a visual design standpoint, the grid positioning is also much more harmonious when directly aligned in relation to the edges of the chart canvas.
• We also recognize that other charting libraries have chosen to place it at the base of the chart component, but it's not necessarily the de facto position. Amcharts is an example of another popular charting library that also places it above the chart: https://www.amcharts.com/demos/range-chart-with-different-fill-colors/

Hope this helps clarify

[scottdickerson]

could we make the placement of this configurable above or below the chart?

[anne-stevens]

Question of the location of the zoom bar came up in this week's charts guild call. Someone from a different product (sorry I forget which one) asked for the flexibility to locate the zoom bar either above or below a column chart. I seconded that request. From the Cognos Analytics POV we always conceived of the zoom bar (we called it the Defender View in reference to some early video game) as part of axis controls and conceived of it being positioned adjacent to the x-axis.

Positioning it on top makes sense if it is conceived of as providing overview first with the detailed chart located below and viewed second. Positioning it below makes sense if it is conceived of as a filter or axis control. In other words, the user looks at the chart first, then uses the zoom bar to filter and drill in on it second.

An alternative approach would be to consider the chart and the zoom bar as separate components and leave it up to the product designers and developers to decide whether to include the zoom bar and where to locate it.