Graphics

The Graphics component allows users to display icons, symbols, or custom vector shapes within a dashboard. It is primarily used for adding visual indicators, UI elements, or decorative symbols to improve usability and design aesthetics.

Graphics can be chosen from predefined categories, icon libraries, or defined manually using SVG path strings.

Best Situations to Use

Use the Graphics component when you want to:

  • Add icons or symbols for visual emphasis in dashboards (e.g., arrows, status indicators, warning symbols).

  • Display shapes or logos that support branding or contextual storytelling.

  • Highlight specific metrics or KPIs with corresponding icons.

  • Incorporate custom vector graphics via SVG paths for specialized use cases.

Not Recommended for:

  • Displaying dynamic data (use charts, KPIs, or gauges instead).

  • Complex illustrations where external image components (PNG/JPG/SVG files) are more suitable.

Properties

Background

  • Shadow: Enable or disable a shadow effect.

  • Shadow Color: Select the color of the shadow.

  • Shadow Transparency: Adjust the shadow’s opacity level.

General

  • Component Name: Assign a unique identifier.

  • Left / Top: Define the position of the component on the dashboard canvas.

  • Height / Width: Specify component size.

  • Initial Visibility: Toggle whether the component appears on first preview.

  • Category: Choose an icon category. Selecting a category reveals the corresponding list of symbols.

  • Symbol: Select a symbol within the chosen category.

Customization

  • SVG Path String: Define a custom vector shape if no category is selected.

    • Open the SVG Path String editor to paste or write SVG path data.

    • Provide icon names directly from supported libraries.

    • Supports integration of Bootstrap Glyphicons.

  • Cursor Style: Choose cursor behavior when hovering over the graphic (e.g., default, pointer, crosshair).

Example Configurations

  • Select an icon from the Category menu to quickly apply a predefined symbol.

  • Use SVG Path Strings to render unique vector icons such as arrows, logos, or custom shapes.

  • Apply a shadow with transparency for added depth.

  • Set pointer cursor style when icons are interactive (e.g., clickable).

Notes

  • If Initial Visibility is unchecked, the component will not appear in the first dashboard preview.

  • Keep SVG paths optimized to reduce rendering overhead.

  • Combine the Graphics component with filters or actions to make icons interactive.

PreviousGaugeNextGuided Tour