This topic describes how to style the title and card area within the style tab of the dashboard editing interface, using a line chart as an example.
Configure Parameters in the Title Subsection
In the Title section, you can personalize elements such as the main title content and display link.
You can define the status icon's display mode and color. Two modes are available: always display and hover display, with hover display being the default. In this mode, the icon is visible only when interacting with the chart.
The Status icon features five distinct icons: filter interaction, jump, drill down, filtered, and fluctuation analysis.
Always display
Choosing always display ensures the status icon remains visible on the chart at all times, regardless of user interaction.
Hover Display
Moving your mouse cursor over the chart causes the status icon to appear next to the main title.
Set Icon Color
You can customize the status icon's color to your preference.
When setting up link jumps, you can select popup as the opening method. Configure the popup form, default size, popup title, and page mask to your preference.
For centered popups, you can choose to display or hide the popup title. Other popup styles automatically show the title without the option to hide it.
Only the left, right, and bottom drawer popups allow you to toggle the display of the page mask. Without the mask, clicking enables you to switch dimension values.
You can set the default size using either a percentage or exact pixel measurements.
When the popup appears, you can adjust the window size and position using your mouse.
Configure Parameters in the Remarks and Endnotes Subsection
In the Remarks and Endnotes section, set up the content for remarks and endnotes.
You can position remarks using one of two methods: following the title or above the chart.
Following the Title
Above the Chart
Configure Parameters in the Widget Container Subsection
In the Widget Container section, set the background fill, border radius, and card padding options.
For title and card area settings, an symbol denotes support, while an
indicates lack of support.
Component | Custom main title | Remarks | Endnote | Display link jump | Card padding | Custom background fill | |
Control | Tab | ||||||
Rich Text | |||||||
Query Control | |||||||
Composite Query Control | |||||||
Image | |||||||
Embedded Page | |||||||
Indicator | Kanban | ||||||
Trend Indicator | |||||||
Dashboard | |||||||
Progress Bar Chart | |||||||
Wave Bar | |||||||
Ticker Board | |||||||
Indicator breakdown tree | |||||||
Indicator relationship graph | |||||||
Table | Trend Analysis Table | ||||||
Cross Table | |||||||
Detail Table | |||||||
Heatmap | |||||||
Line/area Chart | Line Chart | ||||||
Area Chart | |||||||
Stacked Area Chart | |||||||
100% Stacked Area Chart | |||||||
Combination Chart | |||||||
Column/bar chart | Column Chart | ||||||
Stacked Column Chart | |||||||
100% Stacked Column Chart | |||||||
Bar Chart | |||||||
Stacked Bar Chart | |||||||
100% Stacked Bar Chart | |||||||
Circular Bar | |||||||
Ranking List | |||||||
Waterfall Chart | |||||||
Dynamic bar chart | |||||||
Pie/circular | Pie Chart | ||||||
Rose Chart | |||||||
Radar Chart | |||||||
Treemap Chart | |||||||
Bubble/scatter | Bubble Chart | ||||||
Scatter Chart | |||||||
Facet Scatter Chart | |||||||
Funnel/conversion relationship | Funnel Chart | ||||||
Comparison Funnel Chart | |||||||
Flow Analysis Chart | |||||||
Sankey Diagram | |||||||
Geography | Bubble Map | ||||||
Colored Map | |||||||
Heat Map | |||||||
Flying Line Map | |||||||
Symbol Map | |||||||
Others | Word cloud | ||||||
Timeline |
Custom Background Fill
Configure the custom background fill within the widget container.
Card color options include solid and gradient fills.
For background images, you can choose from system presets or upload your own.
NoteThe following components support custom background fill:
Control
Tab and Image
Indicator Category
Scorecard, Trend Indicator, Progress Bar, Wave Bar, and Ticker Board
Trend Category
Line, Area, Stacked Area, 100% Stacked Area, and Combination Chart
Comparison Category
Vertical Bar Chart, Stacked Vertical Bar, 100% Stacked Vertical Bar Chart, Horizontal Bar, Stacked Horizontal Bar, 100% Stacked Horizontal, and Circular Bar