ChartTrendlineProps

Configuration options for rendering a trendline on a chart series. Trendlines help visualize overall trends or direction in the underlying data, and can be projected forward or backward to indicate potential movement. Note: Trendlines are only computed when the parent series has visible: true.

Props

The following table outlines the props for the ChartTrendlineProps:

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

Provides accessibility options for trendline elements to ensure compatibility with assistive technologies.

animation
Animation
{ enable: true, duration: 1000, delay: 0 }

Configures animation settings for the trendline, including duration and delay.

backwardForecast
number
0

Defines the number of data periods to extend the trendline backward from the first data point.

dashArray
string
''

Dash pattern for the trendline stroke, as comma-separated segment lengths.

enableTooltip
boolean
true

Enables or disables tooltips for the trendline. When enabled, hovering over the trendline displays a tooltip with relevant information.

forwardForecast
number
0

Defines the number of periods by which the trendline should extend forward from the last data point.

intercept
number
null

Specifies the y-intercept value for the trendline. This forces the trendline to pass through a specific point on the y-axis.

legendShape
LegendShape
'SeriesType'

Defines the shape used to represent the trendline in the chart legend.

  • When set to 'SeriesType' (default), the trendline uses a straight line marker in the legend (regardless of parent series type), styled with the trendline's stroke.
  • Other values (Circle, Triangle, etc.) render the corresponding marker shape.
name
string
''

Display name of the trendline shown in the chart legend.

opacity
number
1

Opacity of the trendline stroke (0–1).

period
number
2

Defines the number of periods used to compute a moving average.

polynomialOrder
number
2

Specifies the polynomial order for the polynomial trendline. Only applicable when type is set to Polynomial.

stroke
string
'' (inherits series color)

Sets the stroke color of the trendline. Accepts any valid CSS color string.

type
TrendlineTypes
'Linear'

Specifies the type of trendline to be rendered. Available options:

  • Linear: A straight line showing the general direction of data.
  • Exponential: A curve fitting data with exponential growth or decay.
  • Polynomial: A curve fitting data with a polynomial function.
  • Power: A curve representing data with a power function.
  • Logarithmic: A curve fitting data with a logarithmic scale.
  • MovingAverage: Smoothens data using a moving average calculation.
visible
boolean
true

Controls the visibility of the trendline. When set to false, the trendline will be hidden from the chart.

width
number
2

Specifies the width of the trendline in pixels.