Adding a D3 Radial Bar Chart Custom Widget in Bold BI
Bold BI allows you to enhance your dashboards with a variety of custom widgets, including D3 Chart types such as the Radial Bar chart. This knowledge base article provides step-by-step instructions on how to add and use the D3 Radial Bar Chart custom widget in your Bold BI dashboards. The process includes:
- Downloading the Custom Widget
- Publishing the Custom Widget
- Locating the Custom Widget
- Configuring the Widget
Download the Custom Widget
- To begin, download the Accumulation Radial Bar Chart Custom Widget from this article.
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
- Open your dashboard in design mode.
- In the widget search bar within the Designer Panel, search for “Radial Bar.”
- Drag and drop the Radial Bar 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 Radial bar chart, ensure you configure at least one value. Follow these steps for configuration:
- Drag and drop the custom Radial bar chart onto the canvas and resize it as needed.
- Assign data to the widget.
- Once configured, the chart will display your data accordingly.
Formatting the Chart Widget
You can enhance the appearance of the Radial bar chart using settings in the Properties tab.
Basic Settings
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 Tooltip
- Toggle the visibility of Tooltip options.
Show Data Label
- Toggle the visibility of data value labels.
- Disabling this option does not working the related properties, as shown in the image below.
Data Label Color
- Customize the color of data labels.
Auto Font Size
- Automatically adjusts the font size based on the circle dimensions.
Value Label Font Size
- Allows you to set a consistent font size for all value labels. If you prefer to customize the font size manually, simply disable the Auto Font Size option and use Value Label Font Size to set your desired size.
Show label image
- Toggle the visibility of image labels for the images shown, based on the configured image datasets.
Show Category Label
- Toggle the visibility of Category labels.
- Disabling this option does not working the related properties the properties: Category Label, Category Label Color, and Category Label Font Size.
Category Label
- Choose the display format: Category, Percentage, or Category and Percentage.
Category Label Color
- Customize the color of the category label.
Category Label Font Size
- Set a consistent font size for all category labels.
Priority Order: 1. Label Image 2. Category Label
Conclusion
By following this guide, you can successfully integrate and customize the D3 Radial Bar Chart widget within Bold BI, transforming raw data into insightful, visually engaging radial visualizations. With full control over labels, fonts, colors, and data binding, this custom widget enables you to deliver clear, impactful dashboards tailored to your audience’s needs.
Additional References
