Legend control and drilldown functionality in the Packed Bubble Chart
Overview
Packed bubble charts are an effective way to visualize hierarchical or grouped data within a compact space. Each bubble represents a data point, and the size of the bubble reflects its value, such as sales revenue, order count, or website visitors.
Unlike traditional bubble charts that use X and Y axes for positioning, packed bubble charts arrange bubbles closely together to efficiently display relationships and comparisons among data groups.
This makes them ideal for analyzing category-based data, such as sales by product category, revenue by region, or website traffic by country.
Bold BI does not include a built-in Packed Bubble Chart visualization. To use this visualization, you need to add it as custom widget.
Steps to Add a Packed Bubble Chart with Legend
1: Download the Packed Bubble Widget
-
Download the Packed Bubble custom widget package (.bicw) from the provided attachment.
-
Save the package to your local machine.
2. Add the Custom Widget to your Bold BI Server
- Go to General Setting locate the designer and select widget
- Click Add New Widget…
- Upload the .bicw file to Bold BI
- After uploading, the new widget will show in the Miscellaneous section
- Add the Custom Widget to Your Dashboard Designer
- Create a dashboard.
- From the widget list, drag and drop the new PackedBubble widget onto the designer canvas.
- Assign data to the widget.
-
Enable Legend Display: In your chart configuration settings, enable the legend by specifying the appropriate property (e.g.,
legend: { enabled: true }).
-
Customize Legend Behaviour:
- Define interactivity such as filtering or highlighting data sets when a legend item is clicked.
- Use callbacks or event listeners to manage user interactions with the legend.
Follow the guidelines from here to implement drilldown functionality
Add drilldown-specific properties (drilldown: { activeAxisLabelStyle, series }) within the chart configuration.
- Preview the chart
- Use transitions or animations to make the drilldown process visually appealing.
Additional Resources
For more details, visit the official documentation of your charting library or refer to online tutorials:
Create a New Custom Widget
Drill Down
