Enhancing Combo Chart Widget Customization with Custom Theme Variables

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

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

At first, download the latest theme file from the Github release package and extract it. Inside the extracted files, you will discover distinct theme files for each widget in the following location.

For Light Theme: {Extracted_Location}\boldbi-themestudio-5.3.83\boldbi-themestudio-5.3.83\themes\light\widgets

For Dark Theme: {Extracted_Location}\boldbi-themestudio-5.3.83\boldbi-themestudio-5.3.83\themes\dark\widgets

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 Combo Chart widget through the utilization of Combo Chart widget theme variables.

Combo Chart Widget Customization Using Theme Variables

You have the ability to customize the appearance of the Combo Chart widget by utilizing the theme variables, which allow for adjustments to be made to the widget container’s styles such as border radius and border color, as well as the colors and font styles of the Widget Title, Subtitle, Axis title, Axis label, Data label, Legend, font styles of Legend title and colors of Axis grid lines, Axis tick lines colors.

Combo Chart Widget Title

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

--combochart-widget-title-font-color:#0000ff;
--combochart-widget-title-fontsize:25px;
--combochart-widget-title-fontweight:1000;

Combo Chart Widget Subtitle

The following variables allows you to customize the text color and font styles of the Combo Chart widget’s Subtitle.

--combochart-widget-subtitle-font-color:#0000ff;
--combochart-widget-subtitle-fontsize:18px;
--combochart-widget-subtitle-fontweight:1000;

Combo Chart Widget Axis Title

The following variables allows you to customize the text color and font styles of the Combo Chart widget’s Axis Title.

--combochart-widget-axis-title-font-color:#0000ff;
--combochart-widget-axis-title-fontsize:20px;
--combochart-widget-axis-title-fontweight:1000;

Combo Chart Widget Axis Label

The following variables allows you to customize the text color and font styles of the Combo Chart widget’s Axis Label.

--combochart-widget-axis-label-font-color:#0000ff;
--combochart-widget-axis-label-fontsize:20px;
--combochart-widget-axis-label-fontweight:1000;

Combo Chart Axis Tick Lines

The following variables allow you to customize the color of the Combo Chart widget’s Axis tick lines.

--combochart-widget-axis-ticklines-color:#cc00cc;

Combo Chart Grid Lines

The following variables allows you to customize the grid lines and tick lines color of the Combo Chart widget.

--combochart-widget-axis-gridlines-color:#0000ff;

Chart Widget Data Label

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

--combochart-widget-datalabel-font-color:#0000ff;
--combochart-widget-datalabel-fontsize:20px;
--combochart-widget-datalabel-fontweight:Regular;

Combo Chart widget Legend

The following variables allows you to customize the text color and font styles of the Combo Chart widget’s Legend.

--combochart-widget-legend-font-color:#0000ff;
--combochart-widget-legend-fontsize:20px;
--combochart-widget-legend-fontweight:1000;

--combochart-widget-legendtitle-fontsize:16px;
--combochart-widget-legendtitle-fontweight:800;

Combo Chart widget container border radius and color

The following variables allows you to customize the Background color, Border radius and border color of the Combo Chart widget.

--combochart-widget-container-border-radius:10px;
--combochart-widget-container-border-color:#0000ff;
--combochart-widget-container-bg-color:#8ab9f1;