How to Add a Clustered Column Chart custom Widget in Bold BI?
Published:
Follow these steps to publish the Clustered Column Chart custom widget into the Bold BI application and make use of it.
Step 1: Download the Clustered Column Chart custom widget.
Step 2: Publish the custom widget to the Bold BI application with a help link.
Step 3: Once you publish the custom widget, the Clustered Column Chart custom widget will appear under the Miscellaneous section of the designer panel, as in the following image.
Step 4: Drag and drop the widget onto the designer Canvas and configure the required data fields. Once the data is assigned to the Target section, the comparative bars will be displayed. Refer to the screenshot below for reference.
Making improvements in the Clustered Column Chart Custom Widget:
To debug and make changes to the custom widget, follow these steps:
- Unpack the Clustered Column Chart custom widget by following the steps in the mentioned link. Add new improvements to the UI of the Clustered Column Chart Custom widget by making changes in the sourcefile.js file.
- Add the debugger to the sourcefile.js file’s init() method. Also, add the needed changes in the sourcefile.js file.
- Publish the custom widget by following the steps in this link.
- Now, open the new dashboard in the Bold BI designer.
- Open the Developer Tools in the Browser.
- Drag and drop the Clustered Column Chart Custom Widget in the Designer.
- Now, the debugger will trigger. We can add the changes to customize the custom widget.
Enabling the Today Indicator
You can display the Today vertical line by enabling the Today Indicator option under Basic Settings.
The position of the vertical line is calculated based on the quarter‑year value and can be adjusted further to meet your requirements.