How to create and publish a Waterfall Chart custom widget?

Bold BI allows you to enhance your dashboards with a variety of custom widgets, including Waterfall Chart custom widget. This knowledge base article provides step-by-step instructions on how to add and use the Waterfall Chart custom widget in your Bold BI dashboards. The process includes:

1. Downloading the Custom Widget
2. Publishing the Custom Widget
3. Locating the Custom Widget
4. Configuring the Widget

Download the Custom Widget

• To begin, download the WaterfallChart custom widget.

Publish the Custom Widget

• After downloading the widget, publish the custom widget into the Bold BI application to make it available for use in your dashboards, Publishing ensures the widget is integrated into your Bold BI environment and accessible to all authorized users.

Locate the Custom Widget in Designer

• Once the widget is published, it will appear in the Designer Panel of Bold BI. To add it to your dashboard follow the below steps
  1. Open your dashboard in design mode.
  2. In the widget search bar within the Designer Panel, search for “Waterfall Chart”.
     
     
  3. Drag and drop the Waterfall Chart widget from the search results to your desired location on the dashboard canvas.

This places the widget on your dashboard, ready for configuration.

Configure the Custom Widget

To display data effectively in the Waterfall Chart, ensure you configure at least one value. Follow these steps for configuration:

• Drag and drop the custom Waterfall Chart onto the canvas and resize it as needed.
• Assign data to the widget.
• Once configured, the bar will display your data accordingly.               

Formatting the Waterfall Chart Widget

You can enhance the appearance of the Waterfall Chart using settings in the Properties tab.

Basic Settings

Enable Animation 

• Toggle the visibility of Animation options.

Enable Drill-Down

• This option enables the rendering of multiple levels of data within the same view. If you bind more than one column in the Columns section, you can switch to a drill-down view by enabling this setting.

• Once you’ve drilled down into the data, you can easily return to the previous view using the breadcrumb navigator located at the top of the widget.

Show Value Label

• Toggle the visibility of Value label options.

Value Label Position

• Set the label position to Top, Middle or Bottom.
• Change the label position using a dropdown menu.

Orientation

• Set the Orientation to Vertical or Horizontal.
• Change the Orientation using a dropdown menu.

Increase Color

• Set the Increase Color using the dropdown menu.

Decrease Color

• Set the Decrease Color using the dropdown menu.

Chart Background Color

• Set the Chart Background Color using the dropdown menu.

Category Axis Settings

Category Axis

• Toggle the visibility of Category Axis options.

Category Axis Title

• Toggle the visibility of Category Axis Title options.

Custom Category Axis Title

• Set the Custom Category Axis Title using the Text box.

Category-Axis Label Size

• Set the Category-Axis Label Size.

Category-Axis Label Color

• Set the Category-Axis Label Color using the dropdown menu.

Category-Axis Label Style

• Set the Category-Axis Label Style to Normal or Bold.
• Change the Category-Axis Label Style using a dropdown menu.

Category Axis Settings

Primary Value Axis

• Toggle the visibility of Primary Value Axis options.

Primary Value Axis Title

• Toggle the visibility of Primary Value Axis Title options.

Custom Primary Value Axis Title

• Set the Custom Primary Value Axis Title using the Text box.

Primary-Axis Label Size

• Set the Primary-Axis Label Size.

Primary-Axis Label Color

• Set the Primary-Axis Label Color using the dropdown menu.

Primary-Axis Label Style

• Set the Primary-Axis Label Style to Normal or Bold.
• Change the Primary-Axis Label Style using a dropdown menu.

Label Settings

Label Overflow Mode

• Set the Label Overflow Mode to Hide or Trim.
• Change the Label Overflow Mode using a dropdown menu.

Label Rotation

• Set the Label Rotation to 0, +45, +90, -45 or -90.
• Change the Label Rotation using a dropdown menu.

Data Label Settings

Data Label Size

• Set the Data Label Size.

Data Label Label Color

• Set the Data Label Label Color using the dropdown menu.

Data Label Label Style

• Set the Data Label Label Style to Normal or Bold.
• Change the Data Label Label Style using a dropdown menu.

Grid Line

Primary Value Axis

• Toggle the visibility of Primary Value Axis options.

Category Axis

• Toggle the visibility of Category Axis options.

Total

Show Total

• Toggle the visibility of Show Total options.

Title

• Set the Title using the Text box.

Color

• Set the Color using the dropdown menu.
  

References

• How to create a new custom widget?
• Publishing Custom Widgets