---
title: "Define a Focus Bar Control"
slug: "define-a-focus-bar-control"
updated: 2026-02-23T08:14:27Z
published: 2026-02-23T08:14:27Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.lakesidesoftware.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Define a Focus Bar Control

A Focus Bar provides a way to zoom into a section of a chart in order to view detail level data. The user can select a portion of the focus bar and the associated chart will recalibrate to show only the selected range as shown in the example below.

![](https://cdn.document360.io/87d11426-6b1f-4b19-b593-b71e55a81af3/Images/Documentation/focus_bar1.png)

For more information on how to use a focus bar in a dashboard, see [Interacting with Grids and Charts](/documentation/docs/interact-with-grids-and-charts).

## Set Up a Focus Bar on a Chart

1. Start with a dashboard set up to display a chart. This will have a [Query Data block](/documentation/docs/define-a-query-data-block) and a [Chart block](/documentation/docs/define-a-heat-chart) defined.
2. Drag a Focus Bar Control block to your workspace and place it between the Query Data and Chart blocks.

![](https://cdn.document360.io/87d11426-6b1f-4b19-b593-b71e55a81af3/Images/Documentation/focus_bar_setup.png)
3. Connect the Query Data block as an input to the Focus Bar block, and then connect the Focus Bar block as an input to the Chart block.
4. In the Focus Bar's properties, select the same **Pane** from the drop-down list as that in which the Chart will appear.
5. From the drop-down list in the **Focus column** field, select the column that contains the values that you want the user to be able to zoom in on.
6. From the drop-down list in the **Preview column** field, select the column that you want to display in the focus bar. Usually this is one of the columns used as a series in the chart.
7. Click the **Apply** button to save your changes.

<style> p[data-block-id] {font-size:1rem;} ul li p[data-block-id] {margin-bottom: 0;} ul[data-type="taskList"] li div p[data-block-id] {margin-bottom: 0;} ol li p[data-block-id] {margin-bottom: 0;} table tbody th p[data-block-id] { margin-bottom: 0;} blockquote p[data-block-id] {margin-bottom: 0 !important;} &nbsp;p[data-block-id]:empty::after {content: "\00A0";} </style>
