Widget Customization
The Widget Customization in Infoveave is a powerful feature that enables you to tailor the appearance and behavior of widgets to meet the specific data visualization and analysis needs.
To customize widgets in Infoveave Infoboard Designer, follow these steps
- Select the widget you want to customize on the designer canvas.
- Explore the available customization options, which include
- Styling Adjust colors, fonts, borders, styles and backgrounds.
- Labeling Modify labels and captions.
- Interactivity Enable or disable tooltips, and click-actions.
- Save the customization settings to finalize the widget’s appearance and behavior.
For detailed instructions on customizing specific charts and widgets, refer to the ‘Charts and Widgets’ section in the help documentation. There you will find comprehensive step-by-step instructions and specific customization options for each widget type.
Customization Options
Widget customization in Infoveave offers a flexible way to modify the appearance and behavior of various data visualization elements. You can tailor widgets to match your preferences and requirements, adjusting their layout, colors, labels, and more.
The most common fields used for the widget customizations are
General
Infoveave allows you to personalize the appearance of your widgets through the General customization options. General customization options include setting the background colors (solid or gradient), adjusting border styles and border widths, configuring border radius for rounded corners, adding shadows and shadow effects with offsets and blur effects. Additionally, you can select whether to display or hide null values in your widget.
To customize the general appearance of your widget in Infoveave, follow these steps
Background color
- For example, set the hex code as
#ffffff00
for a transparent background. - You can also use the color picker option to select any color from the screen.
Use gradient color
linear-gradient (90deg, RGBA(92,124,250,1) 0%, RGBA(250,82,82,1) 100%)
creates a linear gradient from blue to red.
Border
Use the border option to apply a gradient color to the widget’s background Style Select the border style (e.g., Solid, Dashed, Dotted). Width Set the border width in pixels. For example, 0 for no border.
Border Radius
Adjust the border radius to round the corners of your widget. For example, 0 for sharp corners.
Shadow
Set the shadow for the widget for an enhanced effect. Horizontal Offset Set the horizontal offset of the shadow. For example, 0 for no horizontal shift. Vertical Offset Set the vertical offset of the shadow. For example, 0 for no vertical shift. Blur Radius Adjust the blur radius to control the shadow blur. For example, 0 for a sharp shadow. Spread Radius Set the spread radius to expand or contract the shadow. For example, 0 for no spread.
Style Effect
Choose the shadow effect style from inset and outset, outset to give a raised appearance.
Shadow Color
Select the color of the shadow.
Show null value
Enable or disable the display of null values in your widget. When enabled, null values will be shown in the visualization; otherwise, they will be hidden.
Title
Customize your widget title to give the proper information on the widget and to increase the readability. Infoveave allows you enable or disable the title, set the title label style and size, and choose to wrap long titles. Additionally, it allows you to adjust the background color, apply styles, set the font family and size, the line height, choose the font color, and align the title text as needed.
To customize the title appearance of your widget in Infoveave, follow these steps
- Enabled Toggle the enable or disable option to enable the widget title. When enabled, the title is displayed on the widget.
- Label Enter the text for the widget title. For example, “Total Sales”.
- Word wrap Enable word wrapping to wrap the title text onto multiple lines if it is too long to fit on one line.
- Background color Set the background color of the title using a hex color code. For example,
#ffffff00
for a transparent background.
- Decoration Select to apply decorative styles to the title text, such as bold, italic, or underline.
- Font family Use the option to choose the font family for the title text. For example, “Poppins”.
- Font size Set the font size of the title text. For example,
14
for a 14px font size. - Line height Adjust the line height for the title text. For example,
1
for normal line height. - Font color Set the font color of the title text using a hex color code. For example,
#000000
for black.
- Alignment Choose the alignment for the title text as left, center, or right.
Sorting
Infoveave’s sorting options allow you display your data effectively within your widgets in a hierarchical order. It enhances the clarity on the data of your widgets. It allows you to choose dimension or measure values to be sorted on ascending and descending order criteria.
Infoveave provides various sorting options to help you organize and display your data more effectively within your widgets. Here is how you can customize the sorting settings
- Select to Add to Order Select the field (measures and dimensions) by which you want to sort your data.
- Sort by Ascending Order Use this option to sort the selected field in ascending order (e.g., A-Z, 0-9).
- Sort by Descending Order Use this option to sort the selected field in descending order (e.g., Z-A, 9-0).
- Delete Delete a selected field (measures and dimensions) from the sorting order, to stop the widget from sorting data based on that particular field.
Action
The actions linked with widgets enable you to interact dynamically with your widgets, allowing for a more responsive and engaging dashboard experience. These actions include refreshing the Infoboard to update data, navigating to another Infoboard for detailed analysis, and opening external URLs for additional resources. You can also download reports for offline analysis, trigger Workflows like data updates and report generation, and clear all applied filters to reset the dashboard view.
The actions linked with widgets enhance user interaction and functionality, allowing for a more dynamic and efficient dashboard experience.
To link an action with an Infoveave widget follow the below steps
- Drag the required label widget type and drop it onto the designer workspace, from the chart library.
- Click on the label widget in the designer to select it.
- With the label widget selected, go to the Configuration tab located in the Configuration panel.
- Under the Configuration tab, select the Basic Configuration option to configure the widget (if required).
- Navigate to the Customization option and select Actions.
- Click on the Edit Action button and add an action to the widget.
- Choose the required action to be linked and configure the action.
- Click on the Save option to save the Infoboard.
Refresh Infoboard
The Refresh Infoboard action allows you to update the data displayed on their dashboards, ensuring that the most current information is always available. This is particularly useful for real-time monitoring dashboards where data is frequently changing.
By selecting this action, you can manually refresh the Infoboard without needing to reload the entire dashboard, providing a seamless and efficient way to keep data up-to-date.
Go to Infoboard
The Go to Infoboard action allows you to navigate to another Infoboard within the Infoveave platform. To use this action, you must select the target Infoboard from a list of predefined options, thereby enhancing data organization and exploration within interconnected dashboard sections.
Go to URL
The Go to URL action allows you to navigate to a different URL outside the Infoveave platform. This action allows you to open an external web resource by entering the desired URL. You can choose to open the URL in a new tab for added convenience. This action is beneficial for linking to additional reports, company websites, or other relevant online tools, outside of Infoveave.
Download Report
The Download Report action allows you to download a Infoveave report from a widget, facilitating offline analysis or record-keeping. You can select the report to download from a list of predefined options.
Execute Workflow
The Execute Workflow action triggers predefined workflows or workflow, automating activities such as data updates, report generation, or running specific data processing scripts. You must select the workflow from a list of predefined options, triggering workflow processes directly from the dashboard interface. You can checkbox the option Ask for Confirmation to avoid accidental workflow executions.
Clear Filter
The Clear Filters action removes all applied Infoboard filters, resetting it to its default state. By selecting this action, you can quickly revert your Infoboard to an unfiltered state, facilitating a more flexible and dynamic data analysis process.
Angle Axis
Angle axis customization allows you to tailor the appearance of your polar chart’s axis to better suit the data visualization needs. The customization options include enabling the display the axis, the axis names, and split lines, all ensuring your data is presented clearly and effectively through the widget.
Infoveave provides the below customization options for the angle axis of your polar chart, allowing you to tailor the axis to suit your visualization needs
- Show Enable or disable the display of the angle axis for your polar chart. When enabled, the angle axis will be visible for your widget.
- Start Angle Define the start angle value for your polar chart. The start angle value is set to 90 degrees by default.
- Clockwise Enable or disable the clockwise rotation of the angle axis for your polar chart. When disabled, the angle axis will be rotated anticlockwise for your widget.
- Split Count Set the number of splits on the angle axis for the polar chart.
- Show Gridlines Enable or disable the gridlines on the angle axis for your polar chart.
- Gridline Style Choose the style for the gridlines when enabled in the angle axis for the polar chart.
- Axis Label Enter a name for the axis label; by default, the axis label is set to #[Label].
- You can remove the #[Label] and replace the axis label of your choice.
- Select the axis label, #[Label], for the option to position it or to set the font customization.
- Min Max Scale Select the min max values for the angle axis from the options data, default, and custom.
- When custom is selected, use the min and max fields to enter the min and max values for the angle axis.
Axis Line
Customize the axis split lines by setting their color, width, and type.
Below are the available options
- Axis Line Enable or disable the axis line option.
- Axis Line Color Select the polar chart axis line color using the color picker option.
- Axis Line Width Define the line width of the polar chart axis line.
- Axis Line Type Choose the polar chart axis line as solid, dotted and dashed from the drop-down options.
Categorical Axis
Categorical axis customization allows you to tailor the appearance of your widget’s categorical axis to better suit the data visualization needs. The customization options include enabling the display the axis, the axis positioning, axis label intervals, all ensuring your data is presented clearly and effectively through the widget.
General Options
Infoveave provides the below customization options for the categorical axis of your widgets, allowing you to tailor the axis to suit your visualization needs.
- Show Enable or disable the display of the categorical axis. When enabled, the categorical axis will be visible for your widget.
- Position Choose the position of the categorical axis (e.g., Start, End).
- Inverse Toggle the option to invert the categorical axis direction.
- Interval Set the interval between axis labels as (Auto, 0,1,2. and so on). Choose the Auto for automatic spacing of your axis labels.
- Name Give a name for the axis, by default the axis name is set to #[Label].
- You can remove the #[Label] and replace the name of your choice.
- Select the name #[Label], for the options to position it or to set the font customization.
- Name Rotate Rotate the axis name by a specified degree with the slider provided.
- Name Location Set the location of the axis name to Start, Middle, or End.
- Name Gap Define the gap between the axis line and its name (e.g., 20 pixels).
- Axis Label Enter a name for the axis label, by default the axis label is set to #[Label].
- You can remove the #[Label] and replace the axis label of your choice.
- Select the axis label #[Label], for the option to position it or to set the font customization.
- Orientation Rotate the orientation of the axis labels by a specified degree with the slider provided.
Slider
Slider helps you enhance your widget interactivity with sliders to focus on specific data value easily. You can enable range sliders, adjust their size, thickness, position, and colors, and even add inside zoom functionality. Below are the available options
- Show Range Slider Enable the range slider to allow interactive range selection.
- Slider Size Define the size of the slider using the sliders.
- Slider Thickness Set the thickness of the slider (e.g., 25 pixels).
- Slider Move Handle Size Adjust the size of the slider’s move handle (e.g., 10 pixels).
- Slider Position Set the position of the slider using the position marker or the input text values (e.g., 0, 20, 0, 10).
- Slider Background Color Set the background color of the slider (e.g., #ffffff00).
- Slider Selected Area Color Define the color of the selected area in the slider (e.g., #87afff33).
- Slider Move Handle Color Set the color of the slider’s move handle (e.g., #9dc9fc).
- Inside Zoom Enable inside zoom functionality for the slider.
Axis Pointer
Axis pointer helps you to highlight specific data points. You get the options to customize the axis pointer’s handle size, color, line type, width, and label settings to improve user experience.
Below are the available options
- Show Axis Pointer Enable the axis pointer to highlight specific data points.
- Axis Pointer Handle Size Set the size of the axis pointer handle (e.g., 40 pixels).
- Axis Pointer Handle Color Define the color of the axis pointer handle in Hex code (e.g., #4a4a4a).
- Axis Pointer Line Type Choose the line type for the axis pointer from the drop down as Solid, Dashed, or Dotted.
- Axis Pointer Line Width Set the width of the axis pointer line (e.g., 1 pixel).
- Axis Pointer Handle Margin Define the margin around the axis pointer handle (e.g., 40 pixels).
- Axis Pointer Label Color Set the color of the axis pointer label (e.g., #000000de).
- Axis Pointer Label Background Color Define the background color of the axis pointer label (e.g., #9c9c9ceb)
Axis Line
Customize the axis lines by setting their color, width, and type, and adding symbols at the beginning or the end.
Below are the available options
- Axis Line Enable or disable the axis line option.
- Axis Begin Symbol Choose a symbol to display at the beginning of the axis as Arrow, Circle, Triangle, Diamond, or Pin.
- Axis End Symbol Choose a symbol to display at the end of the axis as Arrow, Circle, Triangle, Diamond, or Pin.
- Axis Line Color Set the color of the axis line (e.g., #333333).
- Size Perpendicular to Axis Set the size axis begin symbol (e.g., 10 pixels).
- Size Parallel to Axis Set the size of the axis end symbol (e.g., 10 pixels).
- Axis Line Width Define the width of the axis line (e.g., 1 pixel).
- Axis Line Type Choose the line type for the axis line as Solid, Dashed, or Dotted.
Columns
The table column gives you options to set the customization for your table widgets. These customization options allow you to set the table background based on the color scales, data scales, or code rules. The column customization also allows you to add a column summary to your table widget.
Customize the table column to enhance the data visibility in your table widget.
Below are the customization options available for the table columns in Infoveave
-
Apply to Select the column name to which you want to apply the column customization; by default, the label value is set to All to apply customization to all columns.
-
Header Select the #[Label] header, to apply customization to the table column header.
-
Wrap Header Text Checkbox the option to wrap the column header with the space available.
-
Value Select the #[Label] value, to apply customization to the table column values.
-
Cell Background Highlight your cells by applying color scale, data bar and code rule.
- Color Scale The color scale option under cell background allows you to color code your cells based on their values.
- Reverse Enable the reverse option to reverse the color scale left to right.
- Colors To change the color scale type, click on the default color range and select the color scale type and the count of colors.
-
Data Bar Data bars option under the cell background allows you to convert the cell values (numeric) into graphical representation. The length of the bar represents the value relative to the other values in the column.
- Based on Select the column from the drop down to enable the data bars.
- Left/Right Enable of disable the option to place the data bars in the left or right side of your column.
- Reverse Enable the reverse option to reverse the color scale left to right.
- Colors To change the color scale type, click on the default color range and select the color scale type and the count of colors.
-
Code Rule Code allows you to define and apply conditional formatting to table cells. To start adding the conditional rules click on the icon
- Left/Right Enable or disable the option to place the icons to the left or right side of your column.
- Field Use the field to enter the conditional rules.
- Color Picker Use the color picker to select the column background color
- Icon Select the icon to be added to the cell values.
-
Comparing Column Values
- To compare values between two columns, use a single equal sign (
=
). - Example
@[Column1] = @[Column2]
- To compare values between two columns, use a single equal sign (
-
Comparing Against Fixed Numeric or Text Values
- When comparing a column value against a fixed numeric or text value, use a double equal sign (
==
). - All text values must be enclosed in single quotes.
- Example for numeric comparison
@[Quantity] == 10
- Example for numeric comparison
@[Quantity] > 10
- Example for text comparison
@[City] == 'New York'
- When comparing a column value against a fixed numeric or text value, use a double equal sign (
-
Odd row color Set the background color for the odd number of rows.
-
Even row color Set the background color for the even number of rows.
-
Aggregation function Choose an aggregation function to apply to the column values.
-
Totals Select the #[Label] header, to apply customization to the table totals.
- Column summary view Select the type of summary view for the table widget.
- Column summary background Choose a background color using the color picker for the column summary.
- Use custom chart color Enable the use of custom colors for charts in the column summary.
- Custom chart color Select a custom color for charts using the color picker in the column summary.
- Column summary axis label color Set the color for axis labels using the color picker in the column summary. The option column summary axis label color works only when the column summary view to set to Column.
- Column summary text color Set the text color using the color picker for the column summary.
- Column summary value color Set the color using the color picker for values in the column summary.
- Column summary null text color Set the color for null text using the color picker in the column summary.
- Column summary null value color Set the color for null values using the color picker in the column summary.
- Geo JSON Select the GeoJSON map of the country needed for geographical data visualization within the column. The option Geo JSON works only when the column summary view to set to Maps.
Cumulative Axis
Customizing the cumulative axis of a Pareto chart, helps you enhance the readability and appearance of the chart. Common customization options for the cumulative axis in a Pareto chart includes adjusting its visibility, position, and scale.
General Options
Infoveave provides the below customization options for the cumulative axis of your Pareto chart, allowing you to tailor the axis to suit your visualization needs.
- Show Enable or disable the display of the cumulative axis. When enabled, the cumulative axis will be visible for your widget.
- Position Choose the position of the cumulative axis (e.g., Start, End).
- Split Count Set the split count between axis labels as (Auto, 0,1,2. and so on). Choose the Auto for automatic spacing of your axis labels.
- Name Give a name for the axis, by default the axis name is set to #[Label].
- You can remove the #[Label] and replace the name of your choice.
- Select the name #[Label], for the options to position it or to set the font customization.
- Name Rotate Rotate the axis name by a specified degree with the slider provided.
- Name Location Set the location of the axis name to Start, Middle, or End.
- Name Gap Define the gap between the axis line and its name (e.g., 20 pixels).
- Show Grid Lines Enable or disable the display of the grid lines in the cumulative axis. When enabled, the grid lines will be visible for your widget.
- Grid Line Style Select the grid line style as solid, dotted, or dashed from the drop-down options.
- Axis Label Enter a name for the axis label, by default the axis label is set to #[Label].
- You can remove the #[Label] and replace the axis label of your choice.
- Select the axis label #[Label], for the option to position it or to set the font customization.
- Orientation Rotate the orientation of the axis labels by a specified degree with the slider provided.
Axis Line
Customize the axis lines by setting their color, width, and type, and adding symbols at the beginning or the end.
Below are the available options
- Axis Line Enable or disable the axis line option.
- Axis Begin Symbol Choose a symbol to display at the beginning of the axis as Arrow, Circle, Triangle, Diamond, or Pin.
- Axis End Symbol Choose a symbol to display at the end of the axis as Arrow, Circle, Triangle, Diamond, or Pin.
- Axis Line Color Set the color of the axis line (e.g., #333333).
- Size Perpendicular to Axis Set the size axis begin symbol (e.g., 10 pixels).
- Size Parallel to Axis Set the size of the axis end symbol (e.g., 10 pixels).
- Axis Line Width Define the width of the axis line (e.g., 1 pixel).
- Axis Line Type Choose the line type for the axis line as Solid, Dashed, or Dotted.
Cumulative Line
Customizing the cumulative axis of a Pareto chart, helps you enhance the readability and appearance of the chart. Common customization options for the cumulative axis in a Pareto chart includes adjusting its visibility, position, and scale.
General Options
The cumulative line customization option in your widgets, allows you to adjust how data is presented. It helps you customize the widget values and the widget type style.
Below are the customization options available for series in Infoveave
- Apply to Select the specific value to apply these settings to. You can choose —All— to apply the settings to all Dimension values.
To apply the customization option to a single dimension value, select the required dimension value from the drop down.
- Show Labels Toggle to enable or disable the display of data labels on the line.
- Hide Overlapped Labels Toggle the option to automatically hide labels that overlap to ensure clarity.
The option will be set to ON state by default.
-
Label Customize the text for the data labels. You can replace the default #[Label] option with custom text by replacing the #[Label] with custom text. You can also replace the #[Label] option with
-
Measures Displays the measure value of the data point, showcasing the data.
-
Dimensions Shows the dimension names on the cumulative line.
-
Decimal Values Set the number of decimal points to be shown for the percentage contribution values over the cumulative line.
-
Orientation Set the orientation of the series using the slider option.
-
Position Choose the position of the series labels (e.g., Top, Bottom, Left, Right).
-
Use Custom Color Toggle to apply custom color for the series. Use the custom color picker to select a custom color for the series (e.g., #2196F3).
-
Symbol Select the symbol for the data value pointer on the cumulative line from the list of available options.
-
Symbol Size Define the size of the symbol used on the cumulative line to showcase the data point.
-
Line Smoothing Select the line style as smooth, step or normal from the list of available options.
-
Line Step With the line smoothing selected as step, define the line step style as start, end or middle.
-
Line Type Select the line type as solid, dotted, or dashed from the list of drop-down options.
-
Connect Nulls Enable or disable the option if you wish to connect the null values in the chart.
Gauge Measure
Gauge measure customization give you options to set the customization for the measure label, the progress bar, the pointer and the pointer anchor. These customization options allow you to showcase your datapoints and the track the progress of the measure value. It allows you to apply the customization options as a whole or to individual measures.
Customize the gauge measure labels to enhance the data points visibility in your widget.
Below are the customization options available for the gauge measure label in Infoveave
- Custom Offset Enable or disable the custom positioning option the for the measure labels.
- Label Offset Horizontal Set the horizontal offset value for the measure label (e.g., 10).
- Label Offset Vertical Set the vertical offset value for the measure label (e.g., 20).
- Round Cap Enable or disable the round cap for the gauge, which determines if the ends of the gauge are rounded.
- Label Apply customization on the gauge measure label values, by selecting #[Label] option.
Gauge Pointer
Apply customization over the gauge widget pointer such as customizing the thickness, length, color and pointer type.
Below are the customization options available for the gauge pointer in Infoveave
- Pointer Show Enable or disable the pointer in your gauge widget.
- Custom Pointer Color Enable or disable the pointer color option to apply custom colors to your gauge pointer.
- Pointer Color Apply custom color to the gauge pointer widget by selecting the color of your choice with the color picker.
- Pointer Length Set custom length to your widget pointer using the slider option.
- Pointer Width Set custom width to your widget pointer.
- Custom Pointer Border Color Enable or disable the pointer border color option to apply custom colors to your gauge pointer border.
- Pointer Border Color Apply custom color to the gauge pointer border by selecting the color of your choice with the color picker.
- Pointer Border Width Set custom border width to your widget pointer.
- Pointer Border Type Define custom border types to your widget pointer as Solid, Dotted, or Dashed.
- Pointer Shadow Apply the shadow effect to the gauge pointer by defining the values for horizontal, vertical, blur and spread.
- Pointer Shadow Style Apply the gauge pointer shadow style as inset or outset. Pick the shadow color using the associated color picker option.
Gauge Progress
Add custom progress bar to your gauge chart to visually track the progress of the data points towards the target value.
Below are the customization options available for the gauge progress in Infoveave
- Progress Show Enable or disable the progress track in your gauge widget.
- Process Round Cap Enable or disable the round capping for your progress track.
- Progress Overlap Enable or disable the progress overlap option to set the progress tracker to the gauge width.
- Progress Color Apply custom color to the gauge pointer border by selecting the color of your choice with the color picker.
- Progress Width Set custom width to your widget progress tracker.
- Progress Border Color Apply custom colors to your gauge progress border with the customer color picker.
- Pointer Border Width Set custom border width to your progress tracker.
- Pointer Border Type Define custom border types to your progress tracker as Solid, Dotted, or Dashed.
- Progress Shadow Apply the shadow effect to the gauge progress tracker by defining the values for horizontal, vertical, blur and spread.
- Pointer Shadow Style Apply the gauge progress shadow style as inset or outset. Pick the shadow color using the associated color picker option.
Gauge Anchor
Customize your gauge pointer anchor to enhance the anchor visibility. it includes defining the anchor size, the color, and border width
Below are the customization options available for the gauge progress in Infoveave
- Anchor Show Enable or disable the anchor pointer in your gauge widget.
- Anchor Overlap Enable or disable the overlapping functionality of the anchor pointer when using multiple measure values when configuring the gauge widget.
- Anchor Color Apply custom color to the gauge pointer anchor by selecting the color of your choice with the color picker.
- Anchor Size Set custom size to your pointer anchor in the gauge widget.
- Anchor Border Color Set the anchor border color option to apply custom colors to your gauge progress border.
- Anchor Border Width Apply custom colors to your gauge anchor border with the customer color picker.
- Anchor Border Type Define custom border types to your anchor as Solid, Dotted, or Dashed.
- Progress Shadow Apply the shadow effect to the gauge progress tracker by defining the values for horizontal, vertical, blur and spread.
- Anchor Shadow Style Apply the gauge pointer anchor shadow style as inset or outset. Pick the shadow color using the associated color picker option.
Gauge Series
Gauge series customization in Infoveave allows you to define the appearance and functionality of your gauge widgets. Gauge series customization give you options to set minimum and maximum values, adjust the gauge radius, define intervals, and apply various styling elements.
Customize the gauge series in your widgets to control the gauge’s appearance and behavior.
Below are the customization options available for gauge series in Infoveave
Minimum Set the minimum value for the gauge (e.g., 0).
Maximum Set the maximum value for the gauge (e.g., 1000).
Radius Set the radius value for the gauge as percentage using the slider option.
Round Cap Enable or disable the round cap for the gauge, which determines if the ends of the gauge are rounded.
Intervals Define the intervals within the gauge to represent different ranges of values. Each interval includes
- Min The starting value of the interval.
- Max The ending value of the interval.
- Color The color used to represent the particular intervals.
Gauge Width Adjust the width of the gauge (e.g., 10).
Shadow Define the shadow for the gauge, with settings for horizontal and vertical offsets, blur radius, and spread.
Style Choose the shadow style of the gauge (e.g., outset).
Color Select the shadow color for the gauge.
Gauge Axis
Customize the gauge axis ticks and the label values in your gauge widget to enhance the visibility.
Below are the customization options available for gauge axis in Infoveave
Axis Tick Distance Set the value for the axis tick distance from the gauge. (e.g., 2).
Axis Tick Length Set the length for the axis tick (e.g., 5).
Axis Tick Width Set the minimum width for axis ticks (e.g.,1).
Custom Axis Tick Color Enable or disable the custom axis tick color for your gauge widget.
Axis Tick Color Pick any custom color for the axis tick with the color picker.
Axis Tick Intervals Specify the interval value between the gauge axis tick lines (e.g., 5).
Axis Label Distance Set the value for the axis label distance from the gauge. (e.g., 2).
Axis Label Rotation Set the rotation style for the axis label distance e.g., Tangential and Radial.
Custom Rotation Enable the custom rotation option for the axis label.
Rotation Angle Set the rotation angle value for the axis label.
Axis Label Select #[Label] to customize the axis label name.
Gauge Axis Split Line
Customize the gauge axis split line in your gauge widget to enhance the visibility on the gauge axis intervals.
Below are the customization options available for gauge axis split line in Infoveave
Split Number Set the split value for the gauge axis. The split value helps you split the total axis range into equal intervals (e.g., 10).
Split Line Distance Set the distance for the split line from the gauge axis tick lines (e.g., 5).
Split Line Length Set the minimum length for split lines in the gauge axis (e.g.,2).
Split Line Width Set the minimum width for split lines in the gauge axis (e.g.,2).
Custom Split Line Color Enable the custom color option for the split line.
Split Line Color Select a custom color for the split line using the custom color picker.
Gauge Target
Define and customize the target value your gauge widget and track their progress.
Below are the options available for gauge target in Infoveave
Show Target Enable or disable the target option on your gauge widget.
Target Define the target value for your gauge widget (e.g., 400).
Target Color Define the color for the target line using the color picker (e.g.,2).
Target Width Set the minimum width for target lines in the gauge axis (e.g.,2).
Target Length Set the minimum length for target lines in the gauge axis using the slider option.
Target Label Size Specify the minimum size for target label in the gauge axis (e.g.,20).
Target Label Color Define the color for the target label using the color picker (e.g.,2).
Target Label Offset X Set the axis target position for the label value in the horizontal axis.
Target Label Offset Y Set the axis target position for the label value in the vertical axis.
Target Shadow Apply the shadow effect to the target line by defining the values for horizontal, vertical, blur and spread.
Shadow Style Apply the target line shadow style as inset or outset. Pick the shadow color using the associated color picker option.
Target icon Select the target line style form the available option e.g., Rectangle, Pin, Circle, Arrow and Diamond.
Grid
Grid option allows you to define the boundaries of your widget, allowing a perfect positioning within the space available. These options include adjusting margins, containing labels within the grid, and customizing the border color and width.
Customizing the Grid Options
Infoveave allows you to customize the grid layout of your widgets to enhance the overall design and functionality of your dashboard. Here are the options available for grid customization
- Show Enable or disable the display of the grid. When enabled, the grid boundaries will be visible, providing a structured layout for your widget.
- Margins Set the margin for your widget to perfectly contain the widget.
- Top Margin Set the margin from the top of the widget. For example, 20 pixels.
- Right Margin Set the margin from the right side of the widget. For example, 10 pixels.
- Bottom Margin Set the margin from the bottom of the widget. For example, 40 pixels.
- Left Margin Set the margin from the left side of the widget. For example, 40 pixels.
- Contain Labels Enable the contain label option to ensure that labels are contained within the grid. This prevents labels from going outside the widget boundaries.
- Border Color Set the color of the grid borders using a hex color code. For example, #000000 for black.
- Border Width Set the width of the grid borders. For example, a value of 2 sets a 2 pixels wide border.
Legends
Customize the legends in your widgets to enhance the clarity of your data visualizations. Customizing the legends make it easier to understand and interpret the information presented in your widgets. It ensures that your legend is easily readable and positioned optimally within your widget.
Basic
Basic legend customization options let you set the position, orientation, and item gaps. You can also enable single selection and scrolling for improved interactivity and usability.
Below are the available options and their descriptions
- Single Select Enable or disable the ability to select only one legend item at a time.
- Position Set the position of the legend by defining the top, right, bottom, and left margins (e.g., 0, 0, 0, 0).
- Show Legend Enable or disable the display of the legend or heatmap.
- Allow Scroll Enable scrolling if the legend items exceed the available space.
- Orientation Set the orientation of the legend (e.g., Vertical or Horizontal).
- Item Gap Define the gap between legend items (e.g., 2 pixels).
Heatmap
Heatmap legends help you understand the data intensity and distribution effectively, providing a clear idea on the data patterns. Heatmap legend customization includes defining the color ranges, and steps.
Below are the available options and their descriptions
- Enable Enable or disable of heatmap by selecting the option Heatmap from Show Legend under Basic.
- Heatmap Type Choose the type of heatmap legend (e.g., Discrete).
- Inverse Invert the color scale of the heatmap legend.
- Steps Set the number of steps or intervals in the heatmap legend.
- Min Define the minimum value for the heatmap legend.
- Max Define the maximum value for the heatmap legend.
- Color Set the color corresponding to the value on the heatmap scale (e.g., rgba(0,0,0,1)).
- Color Range Define the range of colors used in the heatmap legend.
- Out of Range Color Set the color for values outside the defined range (e.g., #d6d6d6).
Numerical Axis
Customize the numerical axis, to tailor the appearance of your widget’s numerical axis to better suit your data visualization needs. The customization options include hiding the display of the axis, setting the positioning, label intervals, ensuring your data is presented effectively.
General Options
Infoveave’s numerical axis customization allows you to tailor the axis to suit your visualization needs. Below are the available options and how to use them
- Show Toggle to enable or disable the display of the numerical axis. When enabled, the numerical axis will be visible for your widget.
- Position Choose the position of the categorical axis (e.g., Start, End).
- Inverse Toggle the option to invert the axis direction.
- Interval Set the interval between axis labels. Choose “Auto” for automatic spacing.
- Name Enter a name for the axis (by default the axis name is set to #[Label]).
- You can remove the #[Label] and replace the name of your choice. Select the name to position it or to set the font customization.
- Name Rotate Rotate the axis name by a specified degree with the slider option provided.
- Name Location Set the location of the axis name (e.g., Start, Middle, End).
- Name Gap Define the gap between the axis line and its name (e.g., 20 pixels).
- Show Grid Lines Enable to show gridlines in your widget.
- Grid Lines Style Select the gridline style from the dropdown (e.g., Solid, Dashed, Dotted)
- Axis Label Enter a name for the axis label (by default the axis label is set to #[Label]).
- You can remove the #[Label] and replace the axis label of your choice. Select the axis label to position it or to set the font customization.
- Orientation Rotate the orientation of the axis labels by a specified degree with the slider option provided.
- Min-Max Scale Choose the scale setting for the axis (e.g., Default, Data, Custom).
- When choosing Data, the axis will be rescaled to showcase the chart with data points.
- When choosing Custom, define the min and max axis values to showcase the data points.
- Min Set the minimum value for the axis (e.g., 0).
- Max Set the maximum value for the axis (e.g., 100000).
- Log Base Set the logarithmic base for the axis (e.g., 10).
Slider
Slider helps you enhance your widget interactivity with sliders by allowing you to focus on specific data ranges easily with the below available options. it includes enabling the range sliders, adjusting their size, thickness, position, and colors, and even adding inside zoom functionality.
- Show Range Slider Enable the range slider to allow interactive range selection.
- Slider Size Define the size of the slider using the sliders.
- Slider Thickness Set the thickness of the slider (e.g., 25 pixels).
- Slider Move Handle Size Adjust the size of the slider’s move handle (e.g., 10 pixels).
- Slider Position Set the position of the slider using the position marker or the input text values (e.g., 0, 20, 0, 10).
- Slider Background Color Set the background color of the slider (e.g., #ffffff00).
- Slider Selected Area Color Define the color of the selected area in the slider (e.g., #87afff33).
- Slider Move Handle Color Set the color of the slider’s move handle (e.g., #9dc9fc).
- Inside Zoom Enable inside zoom functionality for the slider.
Axis Line
Customize the appearance of the axis lines by setting their color, width, and type, and adding symbols at the beginning or end.
Below are the available options
- Axis Line Enable or disable the axis line.
- Axis Begin Symbol Choose a symbol to display at the beginning of the axis as Arrow, Circle, Triangle, Diamond or Pin.
- Axis End Symbol Choose a symbol to display at the end of the axis.
- Axis Line Color Set the color of the axis line (e.g., #333333).
- Size Perpendicular to Axis Set the size axis begin symbol (e.g., 10 pixels).
- Size Parallel to Axis Set the size of the axis end symbol (e.g., 10 pixels).
- Axis Line Width Define the width of the axis line (e.g., 1 pixel).
- Axis Line Type Choose the line type for the axis line as Solid, Dashed, or Dotted.
Parallel Axis
Parallel axis customization allows you to tailor the appearance of your parallel axis of your chart to better suit the data visualization needs. The customization options include enabling the display the axis, the axis names, and split count, all ensuring your data is presented clearly and effectively through the widget.
Infoveave provides the below customization options for the parallel axis of your parallel chart, allowing you to tailor the axis to suit your visualization needs
-
Show Enable or disable the display of the parallel axis for your parallel axis chart. When enabled, the parallel axis will be visible for your widget.
-
Show Axis Name Enable or disable the display of the parallel axis name for your parallel axis chart. When enabled, the parallel axis name will be visible for your widget.
-
Inverse Inverse the display of the parallel axis name for your parallel axis chart. When enabled, the parallel axis name will be inversed for your widget.
-
Name Enter a name for the axis label; by default, the axis label is set to #[Label].
-
You can remove the #[Label] and replace with the axis name of your choice.
-
Select the axis label, #[Label], for the option to position it or to set the font customization.
-
Name Rotate Rotate the radius axis name with the slider option.
-
Name Location Set the radius axis name location for the polar chart to start, end, or middle from the drop-down options.
-
Name Gap Set the distance between the radius axis name and the radius axis.
-
Use Custom Min Max Enable or disable the custom min max values to the parallel axis for your parallel axis chart. When enabled, you can define the min and max scale for the chart.
-
Split Count Set the number of splits ranges required in your parallel axis of your chart.
-
Axis Label Enter a name for the axis label; by default, the axis label is set to #[Label].
-
You can remove the #[Label] and replace with the axis label of your choice.
-
Select the axis label, #[Label], for the option to position it or to set the font customization.
-
Align Set the alignment for the parallel axis values as left, center, or right from the drop-down.
-
Vertical Alignment Set the vertical alignment for the parallel axis values to top, middle or bottom from the drop-down.
-
Orientation Set the orientation for the parallel axis values using the slider option.
Axis Line
Customize the axis lines by setting their color, width, and type, and adding symbols at the beginning or the end.
Below are the available options
- Axis Line Enable or disable the axis line option.
- Axis Begin Symbol Choose a symbol to display at the beginning of the axis as Arrow, Circle, Triangle, Diamond, or Pin.
- Axis End Symbol Choose a symbol to display at the end of the axis as Arrow, Circle, Triangle, Diamond, or Pin.
- Axis Line Color Set the color of the axis line (e.g., #333333).
- Size Perpendicular to Axis Set the size axis begin symbol (e.g., 10 pixels).
- Size Parallel to Axis Set the size of the axis end symbol (e.g., 10 pixels).
- Axis Line Width Define the width of the axis line (e.g., 1 pixel).
- Axis Line Type Choose the line type for the axis line as Solid, Dashed, or Dotted.
Position
The position control option under widget customization allows you to flexibly manipulate the widget position in the provided chart area. The horizontal and vertical slider controls give you the option to precisely place the widget in alignment with the other charts in the dashboard.
Explores how to effectively utilize position control options in widgets. Below are the position control options available for widgets in Infoveave
Vertical Use the sliders option to move the chart vertically within the chart area. Horizontal Use the sliders option to move the chart horizontally within the chart area.
Radar Axis
Radar axis customization allows you to tailor the appearance of your radar chart’s axis to better suit the data visualization needs. The customization options include enabling the display the axis, the axis names, and split lines, all ensuring your data is presented clearly and effectively through the widget.
Axis Label
Infoveave provides the below customization options for the axis label of your radar chart, allowing you to tailor the axis to suit your visualization needs
- Show Enable or disable the display of the categorical axis. When enabled, the categorical axis will be visible for your widget.
- Axis Label Enter a name for the axis label, by default the axis label is set to #[Label].
- You can remove the #[Label] and replace the axis label of your choice.
- Select the axis label #[Label], for the option to position it or to set the font customization.
- Orientation Rotate the orientation of the axis labels by a specified degree with the slider provided.
Axis Name
Infoveave provides the below customization options for the axis name of your radar chart, allowing you to tailor the axis to suit your visualization needs
- Show Enable or disable the display of the categorical axis. When enabled, the categorical axis will be visible for your widget.
- Axis Label Enter a name for the axis label, by default the axis label is set to #[Label].
- You can remove the #[Label] and replace the axis label of your choice.
- Select the axis label #[Label], for the option to position it or to set the font customization.
- Radius Use the slider option to set the radius of the radar chart.
- Rotation Use the slider option to set the rotation of the radar chart.
- Shape Select the radar shape from the drop-down options of polygon and circle.
- Split Number Set the axis line split number for the radar chart for detailed analysis.
Axis Line
Customize the axis lines by setting their color, width, and type, and adding symbols at the beginning or the end.
Below are the available options
- Axis Line Enable or disable the axis line option.
- Axis Begin Symbol Choose a symbol to display at the beginning of the axis as Arrow, Circle, Triangle, Diamond, or Pin.
- Axis End Symbol Choose a symbol to display at the end of the axis as Arrow, Circle, Triangle, Diamond, or Pin.
- Axis Line Color Set the color of the axis line (e.g., #333333).
- Size Perpendicular to Axis Set the size axis begin symbol (e.g., 10 pixels).
- Size Parallel to Axis Set the size of the axis end symbol (e.g., 10 pixels).
- Axis Line Width Define the width of the axis line (e.g., 1 pixel).
- Axis Line Type Choose the line type for the axis line as Solid, Dashed, or Dotted.
Split Line
Customize the axis split lines by setting their color, width, and type.
Below are the available options
- Split Line Enable or disable the axis split line option.
- Split Line Color Select the radar chart split line color using the color picker option.
- Split Line Width Define the line width of the radar chart split line.
- Split Line Type Choose the radar chart split line as solid, dotted and dashed from the drop-down options.
Radius Axis
Radius axis customization allows you to tailor the appearance of your polar chart’s radius axis to better suit the data visualization needs. The customization options include enabling the display the axis, the axis names, and axis lines, all ensuring your data is presented clearly and effectively through the widget.
Infoveave provides the below customization options for the radius axis of your polar chart, allowing you to tailor the axis to suit your visualization needs
- Show Enable or disable the display of the radius axis for your polar chart. When enabled, the radius axis will be visible for your widget.
- Show Axis Name Enable or disable the display of the radius axis name for your polar chart. When enabled, the radius axis name will be visible for your widget.
- Inverse Inverse the display of the radius axis name for your polar chart. When enabled, the radius axis name will be inversed for your widget.
- Interval Set the interval value the axis labels on your polar chart. When set to 0, all the axis labels values are displayed.
- Name Enter a name for the axis label; by default, the axis label is set to #[Label].
- You can remove the #[Label] and replace with the axis name of your choice.
- Select the axis label, #[Label], for the option to position it or to set the font customization.
- Name Rotate Rotate the radius axis name with the slider option.
- Name Location Set the radius axis name location for the polar chart to start, end, or middle from the drop-down options.
- Name Gap Set the distance between the radius axis name and the radius axis.
- Axis Label Enter a name for the axis label; by default, the axis label is set to #[Label].
- You can remove the #[Label] and replace with the axis label of your choice.
- Select the axis label, #[Label], for the option to position it or to set the font customization.
- Orientation Set the orientation for the axis label values using the slider option.
Axis Line
Customize the axis lines by setting their color, width, and type, and adding symbols at the beginning or the end.
Below are the available options
- Axis Line Enable or disable the axis line option.
- Axis Begin Symbol Choose a symbol to display at the beginning of the axis as Arrow, Circle, Triangle, Diamond, or Pin.
- Axis End Symbol Choose a symbol to display at the end of the axis as Arrow, Circle, Triangle, Diamond, or Pin.
- Axis Line Color Set the color of the axis line (e.g., #333333).
- Size Perpendicular to Axis Set the size axis begin symbol (e.g., 10 pixels).
- Size Parallel to Axis Set the size of the axis end symbol (e.g., 10 pixels).
- Axis Line Width Define the width of the axis line (e.g., 1 pixel).
- Axis Line Type Choose the line type for the axis line as Solid, Dashed, or Dotted.
Scatter Single Axis
Scatter single axis customization allows you to tailor the appearance of your chart’s single axis to better suit the data visualization needs. The customization options include enabling the inverse option, the interval, the axis labels, and orientations, all ensuring your data is presented clearly and effectively through the widget.
Scatter Single Axis
Infoveave provides the below customization options for the scatter single axis of your scatter single axis chart, allowing you to tailor the axis to suit your visualization needs
- Inverse Inverse the display of the radius axis name for your polar chart. When enabled, the radius axis name will be inversed for your widget.
- Interval Set the interval value the axis labels on your polar chart. When set to 0, all the axis labels values are displayed.
- Axis Label Enter a name for the axis label; by default, the axis label is set to #[Label].
- You can remove the #[Label] and replace with the axis label of your choice.
- Select the axis label, #[Label], for the option to position it or to set the font customization.
- Orientation Set the orientation for the axis label values using the slider option.
Axis Line
Customize the axis lines by setting their color, width, and type, and adding symbols at the beginning or the end.
Below are the available options
- Axis Line Enable or disable the axis line option.
- Axis Begin Symbol Choose a symbol to display at the beginning of the axis as Arrow, Circle, Triangle, Diamond, or Pin.
- Axis End Symbol Choose a symbol to display at the end of the axis as Arrow, Circle, Triangle, Diamond, or Pin.
- Axis Line Color Set the color of the axis line (e.g., #333333).
- Size Perpendicular to Axis Set the size axis begin symbol (e.g., 10 pixels).
- Size Parallel to Axis Set the size of the axis end symbol (e.g., 10 pixels).
- Axis Line Width Define the width of the axis line (e.g., 1 pixel).
- Axis Line Type Choose the line type for the axis line as Solid, Dashed, or Dotted.
Series Customization
The Series option in your Infoveave widgets allows you to control the appearance and behavior of data points, enhancing both clarity and visual appeal. The customization options provide flexibility in label display, color schemes, orientation, and style, allowing you to create tailored visualizations to effectively communicate data insights.
The series customization option in your widgets, allows you to adjust how data is presented. It helps you customize the widget values and the widget type style.
Below are the customization options available for series in Infoveave
Apply to Select the specific series to apply these settings to. You can choose —All— to apply the settings to all Dimension values. To apply the series customization option to a single dimension value, select the required dimension value from the drop down.
Show Labels Toggle to enable or disable the display of data labels on the series.
Hide Overlapped Labels Toggle the option to automatically hide labels that overlap to ensure clarity. The option will be set to ON state by default.
Label Customize the text for the data labels. You can replace the default #[Label] option with custom text by replacing the #[Label] with custom text. You can also replace the #[Label] option with
- #[Axis] Replaces the label with the value from the specified axis, providing context about the data point’s category.
- #[Value] Displays the numerical value of the data point, showcasing the data.
- #[Percentage] Shows the data point as a percentage, for visualizing proportions within the dataset.
- #[Split] Represents the split of the data point.
- #[Group] Displays the group or category to which the data point belongs.
Orientation Set the orientation of the series (e.g., Vertical or Horizontal).
Position Choose the position of the series labels (e.g., Top, Bottom, Left, Right).
Use Custom Color Toggle to apply custom color for the series. Use the custom color picker to select a custom color for the series (e.g., #2196F3).
Use Gradient Color Toggle to enable the use of a gradient color for the series.
Show Background Toggle to enable or disable the background for the series.
Bar Gap Adjust the gap between bars in the series.
Bar Category Gap Adjust the gap between categories of bars in the series.
Border Radius Set the border radius for the series bars to create rounded corners (e.g., 10, 10, 10, 10).
Box Shadow Define the box shadow for the series bars (e.g., 0, 0, 0, 0).
Style Choose the style of the series bars (e.g., Inset & Outset).
Table
The table option allows you to set the table customization for your widgets. These customization options allow you to set the theme, show total values, show table summary, and change cell border width.
Customize the table column to enhance the data visibility in your table widget.
Below are the customization options available for the table in Infoveave
- Theme Choose between the available theme option of light and dark themes to match your preferred visual style.
- Header Background Color Set the background color of the header section of the table widget.
- Totals Background Color Define the background color for the Show totals option.
- Show Summary Toggle this option to display or hide the summary row. The customization options for the show summary are available under the option Columns.
- Show Totals Toggle this option to display or hide the totals row.
- Hide Row Lines Enable this option to hide the lines between rows.
- Row Line Width Set the width of the row lines. For example, a value of 3 sets the line width to 3 pixels.
- Row Line Color Define the color of the row lines using a color code or color picker.
- Show Column Lines Toggle this option to show or hide the lines between columns.
- Column Lines Width Set the width of the column lines. For example, a value of 1 sets the line width to 1 pixel.
- Column Lines Color Define the color of the column lines using a color code or color picker.
- Show Header Separator Lines Toggle this option to show or hide the separator lines in the header.
- Header Separator Width Set the width of the header separator lines. For example, a value of 1 sets the line width to 1 pixel.
- Header Separator Color Define the color of the header separator lines using a color code.
tooltip
The tooltip in Infoveave allows you to provide clear and visually appealing data insights when you hover over data points. With a variety of options to adjust font styles, colors, behavior, and positioning, you can tailor the tooltip to improve data interpretation.
Infoveave provides various options to customize the tooltip of your widgets, enhancing how data details are displayed when you hover over data points.
Below are the customization options available for tooltips in Infoveave
Font Family Select the font family for the tooltip text (e.g., Poppins).
Font Size Choose the font size for the tooltip text (e.g., 12).
Background Color Select the background color for the tooltip (e.g., #be4bdb).
Label Color Choose the color for the tooltip labels (e.g., #FFFFFF).
Use Custom Color Enable or disable the use of custom colors for the tooltip value.
Value Color Select the color for the values displayed in the tooltip (e.g., #FFFFFF).
Behaviour Set the tooltip behavior of the tooltip (e.g., Default or Sub View).
View Choose the Sub view you like to replace for the default tooltip.
View Position Adjust the position of the tooltip using the provided position selectors.
- Numeric Inputs Set the top, right, bottom, and left margins to position the tooltip accurately.
- Position Grid Visually select the tooltip position from the grid.