PieChartLegendProps

Defines the configuration options for the pie chart legend.

Props

The following table outlines the props for the PieChartLegendProps:

NameTypeDefaultDescription
accessibility
PieChartAccessibilityProps
{ ariaLabel: null, focusable: true, role: null, tabIndex: 0 }

Provides options to enhance accessibility for screen readers and keyboard navigation.

align
LegendAlignment
Center

Specifies the alignment of the legend within its container region in the chart. The behavior of this property depends on the legend's position:

  • For horizontal legend positions (Top, Bottom, Auto):
    • Left: Aligns the legend to the start (left) of the chart container.
    • Center: Aligns the legend to the center of the chart container.
    • Right: Aligns the legend to the end (right) of the chart container.
  • For vertical legend positions (Left, Right):
    • Top: Aligns the legend to the top of the chart container.
    • Center: Aligns the legend to the vertical center of the chart container.
    • Bottom: Aligns the legend to the bottom of the chart container. If an invalid alignment is provided for the current layout direction, the legend defaults to Center alignment.
background
string
transparent

Sets the background color for the legend area. Can use any valid CSS color format including hex, rgb, or named colors.

border
PieChartBorderProps
{ width: 1, color: '', dashArray: '' }

Customizes the border around the entire legend area. Controls color, width, and dash pattern of the legend's outer frame.

containerPadding
PieChartPaddingProps
{ left: 0, right: 0, top: 0, bottom: 0 }

Sets the internal spacing between the legend border and its content. Creates visual breathing room within the legend container for better readability.

enablePages
boolean
true

When set to true, navigation controls (such as arrows or pagination indicators) are shown in the legend, allowing users to view additional legend items that do not fit within the visible area.

fixedWidth
boolean
false

When enabled, forces all legend items to have the same width. Creates a more uniform, grid-like appearance for the legend.

height
string
''

Specifies the height of the legend area in pixels.

imageUrl
string
''

Specifies the image URL for the legend icon. Requires Shape to be set as Image.

inversed
boolean
false

When enabled, reverses the order of elements within each legend item. Places text before the shape/symbol instead of the default shape-then-text order.

itemPadding
number | null
null

Controls the horizontal and vertical spacing between adjacent legend items.

location
PieChartLocationProps
{ x: 0, y: 0 }

Specifies the exact coordinates for positioning the legend when using custom positioning. Contains x and y properties to determine the precise location within the chart container. The position must be set to Custom for this to take effect.

margin
PieChartMarginProps
{ left: 0, right: 0, top: 0, bottom: 0 }

Sets the external spacing around the legend, controlling its distance from other chart elements.

maxLabelWidth
number | null
null

Limits the maximum width of individual legend item labels in pixels. Prevents long text from extending beyond the desired width.

maxTitleWidth
number
100

Limits the maximum width of the legend title in pixels. Text exceeding this width will wrap according to the textWrap property.

opacity
number
1

Controls the transparency of the entire legend. Values range from 0 (completely transparent) to 1 (fully opaque).

padding
number
8

Sets the internal padding between the legend border and its content elements.

position
LegendPosition
Auto

Determines where the legend appears in relation to the chart area. Controls both the orientation of legend items and their overall placement. Available options:

  • Auto - Intelligently positions the legend based on available space.
  • Top - Positions the legend above the chart with horizontal item layout.
  • Left - Positions the legend to the left with vertical item layout.
  • Bottom - Positions the legend below the chart with horizontal item layout.
  • Right - Positions the legend to the right with vertical item layout.
  • Custom - Positions according to the coordinates specified in the location property.
reverse
boolean
false

When set to true, the legend items are shown in reverse sequence— the last item in the data appears first, and the first item appears last.

shape
PieLegendShape
SeriesType

Specifies the shape of the legend icon for each data point. Available options:

  • 'Circle'
  • 'Rectangle'
  • 'Triangle'
  • 'Diamond'
  • 'Cross'
  • 'HorizontalLine'
  • 'VerticalLine'
  • 'Pentagon'
  • 'InvertedTriangle'
  • 'SeriesType'
  • 'Plus'
  • 'Star'
  • 'Image'
shapeHeight
number
10

Controls the height of the visual indicator symbol for each legend item.

shapePadding
number
8

Controls the space between each legend item's shape and its text.

shapeWidth
number
10

Controls the width of the visual indicator symbol for each legend item.

textStyle
PieChartFontProps
{ fontStyle: 'Normal', fontSize: '12px', fontWeight: 'Normal', color: '', fontFamily: '' }

Customizes the appearance of text in legend items.

title
string
''

Specifies a title to be displayed for the legend. The title provides a descriptive heading for the legend items.

titleAlign
HorizontalAlignment
Center

Determines the alignment of the title within its container. Available options:

  • Left: Aligns the title to the left.
  • Center: Aligns the title to the center.
  • Right: Aligns the title to the right.
titleOverflow
TextOverflow
Wrap

Controls how the title behaves when it overflows its container. Available options:

  • Wrap: Wraps the title to the next line.
  • Trim: Trims the overflowed title.
  • None: Displays the title even if it overlaps other elements.
titleStyle
PieChartFontProps
{ fontStyle: 'Normal', fontSize: '12px', fontWeight: 'Normal', color: '', fontFamily: '' }

Customizes the appearance of the legend title text.

toggleVisibility
boolean
true

Controls whether clicking a legend item toggles the visibility of its corresponding series. When disabled, legend items become informational only without interactive behavior.

visible
boolean
true

When set to false, the legend is hidden from view, allowing more space for the chart area.

width
string
''

Specifies the width of the legend area in pixels.