Bar Chart

A Bar chart represents categorical data using bars of different heights/lengths.

One axis (X-Axis) of the chart shows the categories called the Dimension, and the other axis (Y-Axis) shows the measured value for each of the categories called the Measure. The measure can be calculated from any of the aggregate (e.g. count/sum/average etc.) functions. The height of the bars represents the measure.

In the example below, a Bar chart is created to compare issue allocation across assignees.

To create a Bar chart:

  • Right-click on the Assignee column > Select View> Change> Bar.

Refer here to learn more about creating a visualization.

The following figure shows the resulting Bar chart.

Configure Bar Chart

To configure:

  • Select your Bar chart and open the Visualizations Panel.

The following configuration options are available for Bar chart:

  1. Data Configuration : It lets you choose columns for the following settings:

  2. Visual Configuration: It lets you configure the visual appearances and interactions of Bar chart.

  3. Visualization Level Filters: It lets you filter the data in the visualization without impacting the other visualizations.

Refer here to learn more about Visualization Level Filters.

  1. User-Defined Colors : It lets you add meaning to a data point by associating a specific color to it or, differentiate a data point from the rest.

Data Configuration

  • Click on the icon for data configuration options.

X-Axis

On the X-Axis, you can specify the column which contains specific categories to be compared.

To change the column on X-Axis:

  1. Click on to remove the existing column.

  2. From the Data Panel, drag the desired column and drop it onto the Visualizations Panel’s “X-Axis” section.

Note: You can also search the column name in the Data Panel to quickly find it.

Date and Time Grouping on X-Axis

You can create Bar charts by setting date and time values to X-Axis. When specifying a column with date and time on X-Axis, you can group the dates on Year, Quarter, Month, Week, Day, Hour, and Minutes.

  1. From the Data Panel, drag the Date, DateTime and Time type column and drop it onto the Visualizations Panel’s “X-Axis” section.

  2. Click on the icon and select ‘Group By’.

  3. Select appropriate interval.

Y-Axis

The heights of the bars represent a certain measured value for each of the categories. On the Y-Axis, specify the column whose values should be aggregated for the chosen categories.

To change the column:

  1. Follow the same steps as shown above for “X-Axis”.

  2. Click on the icon to select the aggregate function from the drop-down.

  • Aggregate functions for textual data: Count, Unique Count

  • Aggregate functions for numerical data: Count, Unique Count, Sum, Min, Max, Avg

  1. You can add multiple columns to the Y-Axis to create stacked or grouped Bar chart.

  2. You need to separately select aggregate functions for each of the columns added to Y-Axis, as explained above.

Refer here to learn more about the stacked and grouped Bar charts.

In this example, a stacked Bar chart with “Key’ and “Resolved’ columns on Y-Axis enables you to compare the total number of issues vs resolved issues for each assignee.

Color By

You can have different colors for the bars on the basis of X-Axis values.

  • Drag and drop the “X-Axis column” from the Data Panel onto the Visualizations Panel’s ‘Color By’ section.

You can also split each bar into another categorical column in the data. This enables you to see the contribution from different categories to each bar. This is another way of creating multi-bar (stacked/grouped) visualization.

For example, if you choose ‘Issue’ Type for ‘Color By’ Setting, then a specific color will be applied to each of the issue types such as ‘Epic’, ‘Story’, ‘Bugs’ etc.

  • Drag and drop the desired column from the Data Panel onto the visualizations Panel’s ‘Color By’ section.

Note: ‘Color By’ option cannot be applied with multiple columns on Y-Axis. Remove the multiple columns from Y-Axis to apply the ‘Color By’ and vise Versa.

Color Saturation

You can use color gradients to show the progression of data from high to low values. Each bar will be colored with a shade from the spectrum between the two colors defined as ‘Minimum’ and ‘Maximum’.

To apply color gradients:

  1. Drag the desired column from the Data Panel and drop it on the Visualizations Panel’s “Color Saturation” section.

  2. Select the aggregate function by clicking on the icon.

In this example, the Bar chart reflects the gradient with light colors for low values and dark colors for high values calculated as Count (Key).

To customize the shades of color saturation, refer to section- ‘Color Saturation Settings’.

Note: Color Saturation cannot be applied if ‘Color By’ is already configured. Remove the ‘Color By’ setting to apply the ‘Color Saturation’ effect.

Sorting

You can sort the Bar chart on X-Axis or the height of bars defined by values on Y-Axis.

Note: By default, the Bar chart is sorted on X-Axis.

To change the sorting:

  1. Click on icon and select the column from the drop-down.

  2. Click on or icon to change the sorting order (ascending or descending).

  3. Click on ‘Add Level’ to add multi-level sorting.

  4. Drag and drop columns within the sorting section to reorder the sort levels.

  5. Click on the icon to remove the sorting level.

To learn more about sorting, refer to the following GIF.

Note: Steps for sorting are same for Grid and Bar chart.

Sorting GIF from GRID

Visual Configuration

  • Click the icon for visual configuration settings.

Data Labels

You can hide or show the data labels by this toggle switch.

  1. Choose the number of decimal places you want to display value with.

  2. Select Number Format in Thousands, Millions, Billions.

  3. Provide the font size of data labels.

  4. Click on the color picker and select a font color. To restore the default color setting, click ‘Reset to default’.

  5. Select horizontal or vertical Label Orientation and Label Position as Auto, Inside Center, Inside Base etc.

  6. Set the Position of a Data Label.

  7. Set Grammar option which allows to provide concise content to describe data points, you can refer to tooltip.

Bar Options

Bar charts have two variations-

  • Grouped

  • Stacked

They can be really useful to display information about the sub-groups that make up the different categories. These are usually colored differently which makes it easy to distinguish between sub-groups.

  • Click on the arrow icon to see the options for Bar chart type.

Note: You can add a legend to indicate what each sub-group represents.

Stacked Bar Chart

In Stacked Bar charts, the bars representing the sub-groups are placed on top of each other to make a single column. They are great for showing the total because they visually aggregate all of the categories in a group.

Here is the Stacked Bar chart:

Grouped Bar Chart

In Grouped Bar charts, a separate bar represents each of the sub-groups (e.g., Issue types). They are useful when you want to see each element in different categories or compare elements across categories.

X-Axis

  • Toggle to show/hide Axis Title

  • Type in the title for X-Axis

  • Set the size and color of a Title.

  • Toggle to show/hide Axis Label.

  • Set Label Size, Label Color, Label Max Size %, Minimum Bar width and Bar spacing.

Y-Axis

  • Toggle to show/hide Extra Margin.

  • Choose the number of decimal places you want to display values with.

  • Select Number Format.

  • Select the Axis type.

  • Toggle to show/hide Axis Title.

  • Type in the Axis title, also you can choose title size, change title color.

  • Toggle to show/hide Show Axis Label, Show Axis Line.

  • Set Axis Line Weight, Axis Line Type to Dashed, Solid or Dotted.

  • Set Label Size, Label Color and Label Max Size %.

  • Set Minimum and maximum range for bar chart.

  • Toggle to Show Out Of Range Values.

Axis Types

There are two ways to plot values in a Bar chart - linear and logarithmic.

On a linear scale, a change between two values is perceived on the basis of the difference between the values, whereas, on a logarithmic scale, this change is perceived on the basis of the ratio of the two values.

The main reason to use logarithmic scales in charts and graphs is to respond to skewness towards larger values; i.e., cases in which one or a few points are much larger than the bulk of the data.

When plotting disparate data on a linear scale, the smaller values get lesser prominence while the larger ones occupy the entire scale. In such cases, using a logarithmic Axis type is recommended.

The following figures demonstrate the Bar charts with linear and log axis types, created for the same data.

Bar chart on the linear axis:

Bar chart with Linear Axis new

Bar chart on the logarithmic axis:

Bar chart with Log Axis new

When plotting disparate data on a linear scale, the smaller values get lesser prominence while the larger ones occupy the entire scale. In such cases, using a logarithmic Axis type is recommended.

Zoom Options

This option enables you to clearly understand specific data in your Bar chart by zooming it.

  1. Keep the Zoom Options ‘On’ by selecting the toggle switch.

  2. For the Zoom Panel, select the ‘Show’ option from the drop-down list to select the part of your chart by dragging its edges in either direction.

  3. Select the ‘Hide’ option from the drop-down list to hide the Zoom Panel.

  4. Right-click + drag to pane the chart (move up, down, left and right) within the container to focus on a particular portion of the chart.

Here is an illustration.

Note: When the Zoom option is enabled, you can also use the mouse wheel to zoom your chart.

Legend

Legend helps you identify and correlate data on your chart. They provide an overview of the different data points involved in the chart along with the colors associated with each of them. Legend consists of Heading and Items.

  1. To turn legends on or off, select the toggle switch next to Legend.
  2. Toggle to show/hide Show Title.
  3. Select legend position (Left, Right).
  4. You can align the legend by selecting Top, Center or Bottom.
  5. Enter text for the legend heading.
  6. Choose font size, color and max width percentage.
  7. Toggle to turn on word wrap.

Note: Click on legend items and related data will be highlighted in the visualization.

Container Information

You can enter the details of a container in the Container information and customize its text for Font, Size, Color, etc.

Container Styles

You can customize your container styling using below settings:

  • Select margin top, right, bottom, left.
  • Enter contatiner title text and sub-text.
  • Choose border radius, Shadow, and background color.
  • You can now style your container using gradient option by clicking on toggle, it further allows to set degree, minimum and maximum color, minimum and maximum value.

Container Settings

  1. To show/hide the header, Show Title, Show Record Count, Show Full Screen and Show Overflow Menu, click the toggle switch.

  2. To show/hide the Show Header Drilling Buttons, Show Drilling Breadcrumbs, Show Re-execute, Show Add/Edit filter, Configure Columns in App, Clear Selection, Show State, click the toggle switch.

  3. You can choose states such as Aborted, Failed, Processing etc.

  4. To show/hide Show Warning, Scroll Permanently Visible and export data click on the toggle switch.

  5. Turn on the toggle switch to show the border for the container. Change the border color, style and width as shown below:

  1. Choose selection outline to Auto, Visible or Hidden.
  2. Select border options, Bottom, Left, Right or Top, which will further provide options to customize Border Color, Border Style and Border Width.
  3. Toggle to make Scroll Permanently Visible.
  4. Toggle to Export Data. The following figure displays the effect of various container settings for your Bar chart.

Operation States Messages

Add/edit the Operation States Messages such as No Data message, No Data details, Waiting message, Waiting details, Manual Waiting message, Manual Waiting details, Processing message, Completed Message, Completed details, Failed Message, Failed details, Abort message and Abort details to provide a concise information about operation states.

Formulae States Messages

Add/edit the States Messages such as Waiting message, Waiting details, Processing message and Processing details to provide a concise information about Formulae states.

Refresh Rate

Change the Refresh Rate such as Low, Medium, High resolution to display updates in your application.

Visual Interactions

  • Select the Command, Target Behavior and Scope for coordinated visualization from the below settings.

  • To show/hide Left Click Menu items select left click menu action items such as Create Story Point, Keep only, Exclude, Favourite etc.

  • To navigate to another page, click the toggle switch.

To learn more, refer to section- ‘Configure Coordinated Visualization’.

User-Defined Colors

  • Click on the icon for user-defined colors.

Colors for Individual Data Item

It lets you add meaning to a data item by associating a specific color to it and differentiate some data items from the rest.

For example, the red and green color may be used to represent “Off Track” and “On Track” issues, respectively. Whereas, orange color may be used for the “Bugs” type of issues to draw attention.

To change the colors:

  1. Click on the color picker next to the data item for which you want to change the color.

  2. Select the color from the available color grid or click ‘More Colors’.

  3. To restore default settings, click on ‘Reset to default’.

As shown below, orange color has been added to differentiate that data item from the rest.

Color Saturation Settings

The following figure shows the default color saturation settings for your visualization.

To customize the color gradient effects:

  1. Select the Minimum and Maximum color.

  2. Toggle ‘Diverging’ option. An additional color selector for mid-range value, called Center, appears.

  3. Select the color ‘Center’.

  4. You can provide custom values representing ‘Minimum’, ‘Center’, ‘Maximum’ Values. All bars larger than ‘Max Value’ are colored in ‘Max Color’ whereas those less than ‘Min Value’ in ‘Min Color’.

Color Saturation

Configuration Options in Full-Screen Mode

Visualization can be seen in full-screen mode by clicking on icon.

Note: Visualizations Panel is not accessible in full-screen mode.

  1. Click on the icon at the top-right corner of the container.

  2. Select ‘Configure View’ from the overflow menu.

  1. A pop-up form with all the relevant configuration options will appear on the screen.

  2. Configure your Visualizations and click on ‘Apply’.

If you have any feedback on Gathr documentation, please email us!

← Treemap Visualization
Line Chart →