How to Add Custom Distribution Chart Widget in Bold BI?

Published:

Bold BI allows you to enhance your dashboard with a variety of custom widgets, including Distribution Charts Custom Widget with StripLine. This guide provides step-by-step instructions on how to:

Download the Custom Widget
Publish the Custom Widget
Locate the Custom Widget
Configure the Widget

Download the Widget

To begin, download the Distribution Charts Custom Widget from the attachment.

Publish the Widget

After downloading, you must publish the widget to the Bold BI application. This step makes it available for use in your dashboards. You can refer to our detailed guide on publishing custom widgets for additional assistance.

Locate the Widget in Designer

Once published, the widget will appear in the Designer Panel. Follow these steps to add it to your dashboard:

Search for Distribution Charts in the widget search bar.
Drag and drop the widget from the Designer Panel to your desired location on the dashboard.

Configure the Widget

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

Drag and drop the custom distribution Charts 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 accumulation chart using settings in the Properties tab.

Basic Settings

Chart Type

Switch between different chart types.

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 Marker

Toggle the visibility of Marker options.

Show Data Label

Toggle the visibility of data value labels.
Disabling this option also hides related properties such as Data Label and Display Format.

Data Label Color

Customize the color of data labels.

Value Label Rotation

Customize the rotation of data labels.

Empty Point Mode

Set the legend Empty point mode to Gap, Zero or Average.
Change the Empty point mode using a dropdown menu.

Legend Settings

Show Legend

Toggle the visibility of the legend.

Interactivity

Control whether legends are clickable. Disabling interactivity ensures that users cannot toggle data visibility.

Color

Customize legend text color.

Position

Set the legend position to Top, Left, Right, or Bottom.
Change the legend position using a dropdown menu.

Shape

Change the legend shape to:

Circle: Display legend markers as circles.
Series Type: Match legend shape with the series type.

Title

Add a title to the legend.

Grid Lines

Show Axis Border

Enable the option to show axis border around the X and Y axes.

Primary Value Axis

Enable the display of the primary value axis to show labels for each data group along the X-axis.

Category Axis

Enable the category axis to show data scale.

Chart Formatting

Enable Strip Line

Toggle the visibility of the Strip Line.

Strip Line Data

Strip line data (Array of objects): Defines horizontal or vertical strip lines to display based on the provided data.

Each object in the array can include the following properties:

[
  {
    "isHorizontal": true,
    "start": 0,
    "end": 2000,
    "color": "#B9E6F7",
    "text": "SkyBlue",
    "alignment": "End"
  }
]

isHorizontal: Determines the orientation of the strip line (true for horizontal, false for vertical).
start / end: Defines the range of the strip line. For horizontal lines, values are based on the axis; for vertical lines, values are based on the index.
color: Specifies the background color of the strip line.
text: Label displayed on the strip line.
alignment: Position of the label (Start, Middle, or End).

Example Configurations

Horizontal Strip Lines

[ {"isHorizontal": true, "start": 0, "end": 200, "color": "#B9E6F7", "text": "SkyBlue", "alignment": "End"},   
  {"isHorizontal": true, "start": 400, "end": 600, "color": "#F9FAAB", "text": "LightYellow", "alignment": "Middle"},   
  {"isHorizontal": true, "start": 800, "end": 1000, "color": "#EDD0F9", "text": "Violet", "alignment": "Start"} ]

Vertical Strip Lines

[ {"isHorizontal": false, "start": 0, "end": 1, "color": "#B9E6F7", "text": "SkyBlue", "alignment": "End"},   
  {"isHorizontal": false, "start": 2, "end": 3, "color": "#F9FAAB", "text": "LightYellow", "alignment": "Middle"},   
  {"isHorizontal": false, "start": 4, "end": 5, "color": "#EDD0F9", "text": "Violet", "alignment": "Start"} ]

Enable Annotation

Toggle the visibility of the annotations feature in the chart widget.

Chart Annotation Data

Annotation data (Array of objects): This property allows you to define the annotation to be displayed, based on the data provided.

Each object in the array can include the following properties:

[
    {
         "content": "HTML content element",
         "x":"Austria",
         "y":32050, 
         "coordinateUnits":"Point"
    }
]

content: The content of the annotation, which also accepts the ID of the custom element.
x: If coordinateUnit is set to Pixel, x specifies the pixel value. If coordinateUnit is set to Point, x specifies the axis value.
y: If coordinateUnit is set to Pixel, y specifies the pixel value. If coordinateUnit is set to Point, y specifies the axis value.
coordinateUnits: Specifies the coordinate units of the annotation. The options are:
- Pixel - Renders the annotation based on x and y pixel values.
- Point - Renders the annotation based on x and y axis values.

Example Configurations

Chart Annotations data below

[
     {"content" : "<div><img src='https://www.pngmart.com/files/22/Austria-Flag-PNG-HD-Isolated.png' alt='Austria' style='height:40px;width:40px'/></div>", "x":"Austria", "y":32050, "coordinateUnits":"Point"}, 
     {"content" : "<div><img src='https://creazilla-store.fra1.digitaloceanspaces.com/emojis/62660/belgium-flag-emoji-clipart-md.png' alt='Belgium' style='height:40px;width:40px'/></div>", "x":"Belgium", "y":10050, "coordinateUnits":"Point"},
     {"content" : "<div><img src='https://cdn1.iconfinder.com/data/icons/world-flags-13/135/flag_flags_country-37-1024.png' alt='Brazil' style='height:40px;width:40px'/></div>", "x":"Brazil", "y":26000, "coordinateUnits":"Point"},
     {"content" : "<div><img src='https://img.icons8.com/color/1600/canada.png' alt='Canada' style='height:40px;width:40px'/></div>", "x":"Canada", "y":14000, "coordinateUnits":"Point"},
     {"content" : "<div><img src='https://i.imgflip.com/blcnj.jpg' alt='Denmark' style='height:40px;width:40px'/></div>", "x":"Denmark", "y":7500, "coordinateUnits":"Point"}
]

Axis Settings

Title Color

Customize the title color.

Label Color

Customize the label color.

Show Category Axis

Enable the category axis to show labels for each data group along the X-axis.

Show Category Axis Title

Enable the category axis title to show axis title along the X-axis.

Axis Title

Customize the Axis title name.

Label Rotation

Customize the rotation of data labels.

Label Overflow Mode

Set the overflow mode to None, Hide, Trim, or Wrap.
Change the overflow mode using a dropdown menu.

Show Primary Axis

Enable the primary axis to show labels for each data group along the Y-axis.

Show Primary Axis Title

Enable the primary axis title to show axis title along the Y-axis.

Interval

Set the spacing between values displayed on the primary axis to control the interval.

Minimum

Set the minimum value for the primary axis to define where the axis scale begins.

Maximum

Set the maximum value for the primary axis to define where the axis scale ends.

Color Formatting

This property allows users to customize the appearance of individual lines within the chart more effectively.

By default, we have provided a set of 10 predefined colors that can be applied to the lines. These colors are assigned based on the index of each line. If your Distribution chart contains more than 10 lines, the colors will start repeating in the same sequence.

By following these steps, you can effectively add, configure, and customize the Distribution Charts Custom Widget with StripLine in your dashboard.

References

Was this article useful?

Dislike

Written by Raji Rajendran

Updated:

Comments (0)