Enhancing Chart Widget Customization with Custom Theme Variables

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

Chart Widget Customization Using Theme Variables

You have the ability to customize the appearance of the Chart 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, Sub Title, Chart Label, title, legend, and grid lines.

Chart widget Header

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

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

Chart widget Subtitle

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

--chart-widget-subtitle-font-color:#0000ff;
--chart-widget-subtitle-fontsize:20px;
--chart-widget-subtitle-fontweight:800;

Chart widget Axis Title

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

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

Chart widget Axis Label

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

--chart-widget-axis-label-font-color:#00008b;
--chart-widget-axis-label-fontsize:16px;
--chart-widget-axis-label-fontweight:800;

Chart widget Data Label

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

--chart-widget-datalabel-font-color:#0000ff;
--chart-widget-datalabel-fontsize:16px;
--chart-widget-datalabel-fontweight:1000;

Chart widget Legend

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

--chart-widget-legend-font-color:#0000ff;
--chart-widget-legend-fontsize:18px;
--chart-widget-legend-fontweight:800;

--chart-widget-legendtitle-fontsize:24px;
--chart-widget-legendtitle-fontweight:1000;

Chart Grid Lines

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

--chart-widget-axis-ticklines-color:#ff0000;
--chart-widget-axis-gridlines-color:#80afeb;

Chart widget container border radius and color

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

--chart-widget-container-border-radius:10px;
--chart-widget-container-border-color:#00008b;
--chart-widget-container-bg-color:#8ab9f1;

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