Category / Section
How to add Custom Doughnut Chart with value label at center in dashboard?
Published:
We have implemented the Doughnut chart custom widget to display the total value in the center of the chart.
Steps to publish the Doughnut Chart custom widget in Bold BI
- Download the Doughnut Chart custom widget.
- Publish the custom widget to the Bold BI application with a help link.
- Once you publish the custom widget, the Doughnut Chart custom widget will appear under the Miscellaneous section of the designer panel, as in the following image.
- Drag and drop the widget and configure the data. The Doughnut Chart custom widget will render as in the following image.
Making improvements in the Doughnut Chart Custom Widget
Add new improvements to the UI of the Doughnut Chart Custom widget by making changes in the sourcefile.js file. To debug and make changes to the custom widget, follow these steps:
- Unpack the Doughnut Chart custom widget (DoughnutChartWithTotal.bicw) by following the steps in the mentioned link.
- 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 Doughnut Chart Custom Widget in the Designer.
- Now, the debugger will trigger.