ChartTitleProps

Defines configuration options for the chart's title, including styling, positioning, and accessibility features.

Props

The following table outlines the props for the ChartTitleProps:

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

Provides customization options to enhance accessibility for the chart title.

align
HorizontalAlignment
'Center'

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

  • Left: Aligns the text to the left.
  • Center: Aligns the text to the center.
  • Right: Aligns the text to the right.
background
string
'transparent'

The background color of the chart title area. Accepts any valid CSS color value.

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

Defines the border styling for the chart title area.

color
string
''

Sets the color of the title. Accepts any valid CSS color string, including hexadecimal and RGBA formats.

fontFamily
string
''

Specifies the font family used for the title (e.g., 'Arial', 'Verdana', 'sans-serif').

fontSize
string
'15px'

Sets the font size of the text in pixels.

fontStyle
string
'Normal'

Specifies the font style of the title (e.g., 'Normal', 'Italic').

fontWeight
string
'500'

Specifies the font weight (thickness) of the title (e.g., 'Normal', 'Bold', '400').

opacity
number
1

Sets the opacity level of the title. A value of 1 means fully opaque, while 0 means fully transparent.

position
TitlePosition
'Top'

Determines the position of the chart title relative to the chart area. Available options:

  • Top: Displays the title above the chart.
  • Left: Displays the title to the left of the chart.
  • Bottom: Displays the title below the chart.
  • Right: Displays the title to the right of the chart.
  • Custom: Allows manual positioning using x and y coordinates.
text
string
''

Specifies the main title text of the chart. This text provides context or a label for the chart's data.

textOverflow
TextOverflow
'Wrap'

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

  • Wrap: Wraps the text to the next line.
  • Trim: Trims the overflowed text.
  • None: Displays the text even if it overlaps other elements.
x
number
0

X-coordinate for positioning the chart title. Only applicable when position is set to Custom.

y
number
0

Y-coordinate for positioning the chart title.Only applicable when position is set to Custom.