Label

The Label component is used to display static or dynamic text and can also render an image. Beyond simple text display, the Label can be configured to perform actions triggered by JavaScript when clicked, making it both a display and interactive element.

It supports customization of font, hover effects, borders, and dynamic updates based on the outputs of other components such as filters.

Best Situations to Use

Use the Label component when you want to:

  • Display titles, subtitles, or descriptive text in dashboards.

  • Add dynamic values that update based on filters or calculations.

  • Use text or icons as action triggers (via JavaScript).

  • Provide visual callouts or emphasis for key KPIs.

Not Recommended for:

  • Multi-paragraph content or long explanations (use Info Button or Text Box).

  • Complex formatting needs (use rich text components instead).

Properties

Background

  • Shadow: Enable or disable a shadow effect.

  • Shadow Color: Choose a color for the shadow.

  • Shadow Transparency: Adjust the opacity of the shadow.

General

  • Component Name: Assign a unique identifier.

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

  • Height / Width: Specify component dimensions.

  • Initial Visibility: Toggle whether the Label is displayed on first preview.

  • Dynamic: Enable dynamic updates of the Label value based on outputs from other components (e.g., filters).

  • Text: Enter the text to be displayed in the Label.

Style

  • Font Color: Customize the color of the Label text.

  • Font Style: Apply styles such as italic or normal.

  • Font Weight: Define text thickness (e.g., bold, 300/600/900).

  • Hover Effects:

    • Enable Hover: Add interactivity when the Label is hovered over.

    • Hover Color: Define a color to be displayed on hover.

  • Border:

    • Border Thickness: Define the thickness of the Label border.

    • Border Color: Customize the border color.

  • Cursor Style: Define the cursor type when hovering over the Label (e.g., pointer, default).

Example Configurations

  1. Static Label

    • Displays a fixed text such as “Revenue Dashboard”.

  2. Dynamic Label

    • Shows a filter output like “Selected Year: 2025” that updates automatically.

  3. Interactive Label

    • Configured with JavaScript to trigger an action (e.g., refreshing filters or updating charts).

  4. Styled Label with Hover

    • Border and hover color applied to indicate interactivity.

Notes

  • Use Dynamic Labels for contextual feedback to users (e.g., active filters or date ranges).

  • Apply hover effects and borders to visually distinguish interactive Labels.

  • Keep Label text concise for clarity and readability.

PreviousInput BoxNextLegend