Enhancing Scatter Widget Customization with Custom Theme Variables

Bold BI offers support for customizing the appearance of the Scatter widget by using custom theme variables. These variables allow you to customize various aspects of the Scatter widget’s appearance. Once you have customized the theme variables, you can refer to the provided knowledge base (KB) articles to learn how to generate the custom dashboard theme minified file with the customized Scatter changes and upload it to the server.

KB Articles: How to generate custom dashboard theme and upload it to server

To begin, download the latest theme file from the documentation and extract it. Within the extracted files, you will find separate theme files for all the widgets. Utilizing these files, you can customize any widget and achieve the desired output throughout the dashboards. This article provides comprehensive information on customizing the Scatter widget by using the Scatter widget theme variables.

Scatter Widget Customization Using Theme Variables

You have the ability to customize the appearance of the Scatter widget by utilizing the theme variables, which allow for adjustments to be made to the widget container’s border radius, background and border color, as well as the colors and font styles of the Widget Header, Subtitle, Scatter chart Axis title, label, legend, Data label, border radius and background color.

Scatter widget Title

The following variables allows you to customize the text color and font styles of the Scatter widget’s header.

--scatter-widget-title-font-color:#0053b3;
--scatter-widget-title-fontsize:25px;
--scatter-widget-title-fontweight:1000;

Scatter Widget Subtitle

The following variables allows you to customize the text color and font styles of the Scatter widget’s subtitle.

--scatter-widget-subtitle-font-color:#0000ff;
--scatter-widget-subtitle-fontsize:20px;
--scatter-widget-subtitle-fontweight:1000;

Scatter Widget axis title

The following variables allows you to customize the text color and font styles of the Scatter widget’s axis title.

--scatter-widget-axis-title-font-color:#8ab9f1;
--scatter-widget-axis-title-fontsize:18px;
--scatter-widget-axis-title-fontweight:1000;

Scatter Widget axis label

The following variables allows you to customize the text color and font styles of the Scatter widget’s Axis label.

--scatter-widget-axis-label-font-color:#8ab9f1;
--scatter-widget-axis-label-fontsize:20px;
--scatter-widget-axis-label-fontweight:1000;

Scatter Widget Data Label

The following variables allows you to customize the text color and font styles of the Scatter widget’s Data Label.

--scatter-widget-datalabel-font-color:#0053b3;
--scatter-widget-datalabel-fontsize:16px;
--scatter-widget-datalabel-fontweight:1000;

Scatter Widget Legend

The following variables allows you to customize the legend font color and font styles of the Scatter widget.

--scatter-widget-legend-font-color:#0053b3;
--scatter-widget-legend-fontsize:20px;
--scatter-widget-legend-fontweight:1000;

Scatter Widget Border radius and Border color

The following variables allows you to customize the Border radius and border color of the Scatter widget.

--scatter-widget-container-border-radius:3px;
--scatter-widget-container-border-color:#8ab9f1;

Scatter Widget Background color

The following variables allows you to customize the Background color of the Scatter widget.

--scatter-widget-container-bg-color:#ADD8E6;

Scatter Widget gridlines color

The following variables allows you to customize the gridlines color of the Scatter widget.

--scatter-widget-axis-gridlines-color:#00008b;

NOTE: It is crucial to emphasize that if you intend to customize the appearance of a specific widget using specific theme variables, refrain from customizing the Scatter chart widget in the properties.