Sign In |

Bar Graph Element

Updated on May 9, 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 panel buttons menu.  

Screenshot of the Elements buttons with Bar Graph highlighted.

A bar graph library will then appear in the settings panel to the right. Clicking on a chosen bar graph will load it into the scene. Once a bar graph has been added to the scene, it can be clicked and dragged to the desired location.  

Screenshot of the software with the Bar Graph settings pane highlighted on the right hand side.

You can toggle between bar graphs using mph or km/h units by using the buttons at the bottom of the library.  

Image showing the speed options within the Scene Library with MPH selected.

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

The bar graph element can be resized using the icon in the bottom right-hand corner.  

Image showing how to resize a Bar Graph element.


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.

Example of a Bar Graph background image.
Bar graph background image

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

Screenshot of the Elements buttons with the Bar Graph button highlighted.

Within the bar graph library, selecting the 'New Bar' option will add a new bar graph element to the scene.  

Images depicting how to add a new Bar Graph element.

To upload a background image use the search icon button within the background settings area.


When a bar graph is selected, its settings are shown in the right-hand panel. The settings presented are dependent on whether the background or the bar fill is selected.  

Screenshot of the Bar Graph Background settings.
Background settings
Screenshot of the Bar Fill settings.
Bar fill settings

If you are creating a new bar graph rather than using one from the range library, or wanting to change the image, the background can be set by clicking on the search icon when the background is selected. 

Images depicting how to set a new background image.

Bar graph backgrounds can be made transparent by ticking the ‘Transparent’ option within the bar graph background area.

When either the bar background or fill is selected, 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 GPS, CAN or OBD.

Screenshot of the Parameter settings with CAN and Throttle Position options selected.

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.

Selecting the Scene Library button opens up a Channel Settings window where you can configure CAN and OBD channels.

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.  

Images depicting how to move the Bar Fill.

After the bar size and location has been set, choose the colour the bar will fill with. To change the colour, select the existing colour and choose from the colour wheel. The opacity of the colour can also be changed here.

To set a specific RGB value, click on ‘Color sliders’. 

Images depicting selecting a colour for the bar fill.

Set the direction in which the bar graph will fill.  

Screenshot of the Background settings with the fill direction dropdown list of options displayed.
Image showing the bar fill direction going from left to right.
Left to Right
Image showing the bar fill direction going from right to left
Right to left
Image showing the bar fill direction going from left to right.
Left to Right
Image showing the bar fill direction going from right to left
Right to left
Image showing the bar fill direction going from bottom to top.
Bottom to Top
Image showing the bar fill direction going from top to bottom.
Top to Bottom
Image showing the bar fill direction going from bottom to top.
Bottom to Top
Image showing the bar fill direction going from 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 background settings with Minimum Position options dropdown list displayed and highlighted.

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


For example:

Image showing an example bar graph where the minimum position is a positive value.
Image showing an example bar graph where the minimum position is a negative value.
Image showing an example bar graph where the minimum position is a positive value.
Image showing an example bar graph where the minimum position is a negative value.

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

Screenshot of the background settings with Minimum Position set as Reverse.

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

Screenshot of the Bar Range settings.


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 within the background settings.  

Screenshot of the Ranges settings with the Add button highlighted.

To set up each bar, click on it so it is highlighted. The settings within the right hand panel will apply to the selected bar.  

Screenshot of a bar graph element with multiple bars.

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

Screenshot of a bar graph element with multiple bars filled with varying colours from green to red.

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 'Command + C' (Copy) and 'Command + V' (Paste).

Screenshot of the Elements menu with Copy highlighted.
Screenshot of the Elements menu with Paste highlighted.
Screenshot of the Elements menu with Copy highlighted.
Screenshot of the Elements 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 'Backspace' key on a keyboard, and again, confirming the prompt. 

Screenshot of the Elements menu with Delete highlighted.