Legend

The Legend component is used alongside other charts to display series labels with optional checkboxes. It helps users easily interpret chart data by linking colors, shapes, or markers to specific data categories.

With built-in support for checkbox selection, the Legend allows users to show or hide series dynamically, making it an essential tool for interactive dashboards.

Best Situations to Use

Use the Legend component when you want to:

  • Provide context for chart elements by mapping colors or markers to categories.

  • Allow users to toggle series on or off with checkboxes.

  • Improve dashboard readability when multiple data series are displayed.

  • Align with standard data visualization practices (legends are expected by most users).

Not Recommended for:

  • Dashboards with only one or two categories where labels are already obvious.

  • Overly dense charts where too many legend items reduce usability.

Properties

Background

  • Background Color: Define the legend’s background color.

  • Transparency: Adjust background transparency.

  • Border: Enable or disable a border.

  • Border Color: Customize the border color.

  • Border Radius: Round the legend’s corners.

  • Shadow: Enable or disable a shadow effect.

  • Shadow Color: Select shadow hue.

  • Shadow Transparency: Adjust shadow opacity.

General

  • Component Name: Assign a unique identifier.

  • Left / Top: Position the Legend on the dashboard canvas.

  • Height / Width: Define component dimensions.

  • Initial Visibility: Choose whether the Legend is visible on the first preview.

  • Show Checkbox: Display checkboxes alongside legend values for interactive filtering.

  • Associate Chart: Connect the Legend to a chart so the items represent series from that chart.

  • Orientation: Choose between Horizontal or Vertical layout.

  • Shape: Adjust the marker shape (e.g., square, circle).

Style

  • Font Color: Set the font color for legend labels.

  • Font Size: Adjust text size.

  • Font Style: Choose normal or italic.

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

  • Font Family: Select a consistent typeface.

Example Configurations

  1. Horizontal Legend

    • Displays legend values in a row beneath or above the chart.

    • Useful for charts with fewer categories.

  2. Vertical Legend

    • Displays legend values in a column beside the chart.

    • Works well for charts with multiple series.

  3. Interactive Legend with Checkboxes

    • Allows users to toggle chart series visibility by selecting/deselecting checkboxes.

Notes

  • Always use Associate Chart to link the Legend correctly with a chart.

  • Place the Legend where it does not overlap with chart data.

  • For accessibility, ensure sufficient color contrast between legend markers and background.

  • Use horizontal orientation for compact dashboards and vertical orientation when more space is available.

PreviousLabelNextProgress Pie