Configuring a Custom Bar Chart Widget

Learn to configure a custom bar chart widget

Last published at: March 10th, 2026

The custom bar chart widget can fetch data through a database connection and an SQL query, then display a bar chart based on the resulting data.

Go to the Manage > Dashboards page. 

 

Click the Actions > Create menu option on the Manage Dashboard page to create a new dashboard. You need to provide the dashboard name and display order number. 

 

The dashboard designer canvas opens on a new page. Drag the Custom Bar Chart Widget from the toolbox onto the designer canvas. Click the Edit icon to configure it. 

 

The Configure Widget UI properties are shown in the pop-up window below. Enter the title name. Choose the database connection from the drop-down menu. Enter the appropriate SQL Select syntax for the bar chart algorithm.  Use the $dateFilter (wildcard syntax) in the Where condition and include a relevant date column reference. Select the bar chart orientation (vertical or horizontal). Choose the chart result type (number or percentage). Pick the colors from the drop-down menu for the chart heading, body, and legend text. Click the Save button to finalise the changes. 

 

On the dashboard designer canvas, choose UI > Preview to view the dashboard. 

 

The custom bar chart widget dashboard is displayed on the new page. 

 

Use the date filter to render the chart to a different timeline. Hover the mouse on the bar to view the legend text. 

 

To view the dashboard in the menu pane, select the Utils > Show/Hide option on the dashboard designer canvas. 

 

Refresh the FlowWright Dashboard page to see the updated dashboard in the left pane, as shown below.