Sign In |

Bar Graph Element

Updated on May 7, 2026

VBOX Video HD2 software comes supplied with a library of bar graph elements. The user also has the option to create their own bar graph using a PNG, JPEG or BMP image file.

Open the bar graph library by clicking the ‘Bar’ icon from the top menu.

Screenshot of the Bar menu button.

Open the bar graph library by clicking the ‘Bar’ icon from the top menu.

Screenshot of the Bar menu button.

A drop-down menu will then appear, allowing a bar graph to be selected from the library. Clicking on a chosen bar graph will load it into the scene.

Screenshot of the Bar Graph menu with 'Vertical Red 0-100 Bar' selected.

Selecting the 'Filter' drop down on the left enables you to filter the Bar Graphs shown between default and custom created.  

Screenshot of the Filter dropdown list.

Selecting the 'Filter' drop down on the left enables you to filter the Bar Graphs shown between default and custom created.  

Screenshot of the Filter dropdown list.

Once a bar graph has been added to the scene, it can be clicked and dragged to the desired location. 

Bar graphs within the library will have pre-defined settings.


When creating a new bar graph element, an image for the background is required, unless using a transparent background, in which case tick the ‘Transparent’ option. An example image is shown below. 

Screenshot of the Bar Graph background image
Bar Graph Background Image

When creating a new bar graph element, an image for the background is required, unless using a transparent background, in which case tick the ‘Transparent’ option. An example image is shown below. 

Screenshot of the Bar Graph background image
Bar Graph Background Image

To create a new bar graph, click the ‘Bar’ icon from the top menu.

Screenshot of the Bar Graph menu button.

To create a new bar graph, click the ‘Bar’ icon from the top menu.

Screenshot of the Bar Graph menu button.

Within the drop down menu, selecting the ‘New’ option will add a new bar graph element into the scene. 

Screenshot of the Bar Graph menu with New highlighted.

Double click on the new bar graph to load a background image.  

Images depicting the process steps for loading a background image on a new bar graph.

Now the background image has been loaded, the settings of the bar graph can be defined.


When an element is selected, its settings are shown in the right hand panel.  

Screenshot of the software with the Bar Graph Settings panel highlighted on the right hand side.

The data set to display on the bar graph can be changed using the two drop-down menus within the parameter section.

The first drop-down menu defines the source. Select either CAN, GPS, Heart rate monitor (if being used with a heart rate element), Maths Channels or OBD. 

Screenshot of the Parameter options.

The second drop-down list defines the channel to be shown. In the example above, a CAN input is set to display Throttle pedal data.

A number of GPS parameters are available to choose from, such as the following:

  • Satellites
  • UTC time
  • Latitude
  • Longitude
  • Speed
  • Heading
  • Height
  • Longitudinal acceleration
  • Lateral acceleration
  • Combined acceleration
  • Vertical speed
  • Local time
  • Day of month
  • Month
  • Year
  • Distance since power-up
  • Distance since stationary
  • Time stationary 
  • Time moving
  • Radius of turn
  • Gradient (%)
  • Solution type

More information on the parameters can be found here.

Within the parameter section, speed, acceleration or distance channels can be set to display in different units.

The options available are:

  • Speed – km/h, mph, kts, m/s, ft/s
  • Acceleration – g, m/s², ft/s²
  • Distance – m, ft, km, mi, nmi

Move the bar graph fill area to the desired location and re-size it using the icon in the bottom right corner.  

Image depicting the process steps for moving the bar graph fill area and resizing it.

After the bar size and location has been set, choose the colour the bar will fill with. 

To set a specific RGB colour, click ‘Advanced’.   

Image depicting selecting a bar colour.

Set the direction in which the bar graph will fill.  

Screenshot of the Bars settings with Fill Direction highlighted.
Screenshot showing an example of a bar filling left to right.
Left to Right
Screenshot showing an example of a bar filling right to left.
Right to left
Screenshot showing an example of a bar filling left to right.
Left to Right
Screenshot showing an example of a bar filling right to left.
Right to left
Screenshot showing an example of a bar filling bottom to top.
Bottom to Top
Screenshot showing an example of a bar filling top to bottom.
Top to Bottom
Screenshot showing an example of a bar filling bottom to top.
Bottom to Top
Screenshot showing an example of a bar filling top to bottom.
Top to Bottom

The minimum position setting will automatically move depending on fill direction. For most cases, the user will not need to change this.   

Screenshot of the Bars settings with Minimum Position highlighted.

If configuring a bar graph for a negative value, the minimum position may need to be changed.

For example:  

Screenshot showing an example of a bar with a minimum position in negative values.
Screenshot showing an example of a bar with a minimum position in positive values.
Screenshot showing an example of a bar with a minimum position in negative values.
Screenshot showing an example of a bar with a minimum position in positive values.


As the left hand bar graph is showing negative values, it will need to be set as shown below.  

Screenshot of the Bars Settings with Fill Direction set as Right to Left, and Minimum Position set to Left.

The last step is to define the minimum and maximum values of the bar graph. Use the 'Test Value' box to check what will be shown when different values are received.

Screenshot of the Bars and Range Settings with Range highlighted.


Multiple bars can be added into a single bar graph element. When using multiple bars, the process above must be followed for each bar individually.

Additional bars are added into a bar graph element using the ‘Add’ button.  

Screenshot of the Bars Settings with the Add button highlighted.

To set up each bar, click on it so it is highlighted. The settings defined in the 'Bar' area will apply to the selected bar.  

Screenshot of a Bar Graph containing multiple bars to be configured.

Each bar can have its range, colour and fill direction defined individually.

Screenshot of a Bar Graph with individual bars in multiple colours.


Bar graph background images can be changed by clicking the search (magnifying glass) icon next to the currently loaded image.

Screenshot of the Background setting with a selected filename highlighted.

Elements and their associated settings can be duplicated within a scene by either right clicking on the element, selecting 'Copy' from the dropdown then right-clicking in an empty area and selecting 'Paste' from the dropdown, or by using keyboard shortcuts 'Ctrl + C' (Copy) and 'Ctrl + V' (Paste).  

Screenshot of the right-click menu with Copy highlighted.
Screenshot of the right-click menu with Paste highlighted.
Screenshot of the right-click menu with Copy highlighted.
Screenshot of the right-click menu with Paste highlighted.

Elements can be removed from the scene in two ways; either by right-clicking on the element, selecting 'Delete' from the dropdown and confirming the prompt, or by pressing the 'Delete' key on a keyboard, and again, confirming the prompt.  

Screenshot of the right-click menu with Delete highlighted.