Enhancing Radial Gauge Widget Customization with Custom Theme Variables

Bold BI offers support for customizing the appearance of the Radial Gauge widget by using custom theme variables. These variables allow you to customize various aspects of the Radial Gauge 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 Radial Gauge changes and upload it to the server.

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

At first, download the most recent release package for the theme from the aforementioned knowledge base in Step 1 and extract it. Inside the extracted files, you will discover distinct theme files for each widget. By utilizing these files, you can personalize any widget and attain the outcome that you like across the dashboards. This article offers comprehensive guidance on modifying the Radial Gauge widget through the utilization of Radial Gauge widget theme variables.

Radial Gauge Widget Customization Using Theme Variables

You have the ability to customize the appearance of the Radial Gauge 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 title, subtitle, needle pointer, target pointer, scale background, label, widget title, value, difference value and color, border styles and background color.

Radial Gauge Widget Header Title

The following variables allows you to customize the font color, size and weight of the Radial Gauge Header title.

--circulargauge-widget-header-title-font-color:#0000FF;
--circulargauge-widget-header-title-fontsize:25px;
--circulargauge-widget-header-title-fontweight:1000;

Radial Gauge Widget Subtitle

The following variables allows you to customize the font color, size and weight of the Radial Gauge widget’s subtitle.

--circulargauge-widget-subtitle-font-color:#0000FF;
--circulargauge-widget-subtitle-fontsize:20px;
--circulargauge-widget-subtitle-fontweight:1000;

Radial Gauge widget Needle pointer, Target pointer and Scale backgrounds

The following variables allows you to customize the Needle pointer background of the Radial Gauge widget.

--circulargauge-widget-needle-pointer-background:#FF0000;
--circulargauge-widget-target-pointer-background:#FF0000;
--circulargauge-widget-scale-background:#FF4D4D;

Radial Gauge Widget Label

The following variables allows you to customize the color, Size and weight of the Radial Gauge widget’s label.

--circulargauge-widget-label-font-color:#00B300;
--circulargauge-widget-label-fontsize:16px;
--circulargauge-widget-label-fontweight:1000;

Radial Gauge widget Title

The following variables allows you to customize the font color, size and weight of the Radial Gauge widget’s title.

--circulargauge-widget-title-color:#0095B3;
--circulargauge-widget-title-fontsize:18px;
--circulargauge-widget-title-fontweight:1000;

Radial Gauge Widget value

The following variables allows you to customize the font color, size and weight of the Radial Gauge widget’s value.

--circulargauge-widget-value-font-color:#00004D;
--circulargauge-widget-value-fontsize:17px;
--circulargauge-widget-value-fontweight:1000;

Radial Gauge widget Difference value

The following variables allows you to customize the difference value styles of Radial Gauge widget.

--circulargauge-widget-differencevalue-fontsize:20px;
--circulargauge-widget-differencevalue-fontweight:700px;

Radial Gauge widget Difference value colors

The following variables allows you to customize the difference value low, medium and high color of Radial Gauge widget.

--circulargauge-widget-differencevalue-low-color:#800000;
--circulargauge-widget-differencevalue-medium-color:#FF8000;
--circulargauge-widget-differencevalue-high-color:#008040;

Radial Gauge Widget Container

The following variables allows you to customize the Border radius, border color and background color of Radial Gauge widget.

--circulargauge-widget-container-border-radius:5px;
--circulargauge-widget-container-border-color:#000080;
--circulargauge-widget-container-bg-color:#99CCFF;

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 Radial Gauge widget in the properties.