Trendlines in React Chart
Use trendlines to visualize patterns and trends in your chart data. Trendlines apply mathematical models (linear, exponential, polynomial, etc.) to your data series, helping identify direction, momentum, and forecast future values directly on the chart.
Overview
A trendline represents the general direction of a set of data points. Add one or multiple trendlines to a series to highlight overall movement, smooth noisy datasets, or predict future values. Customize their appearance using markers, line styles, colors, and widths to match your chart theme.
Trendlines are added using the ChartTrendlineCollection component, allowing multiple trendlines per series with independent customization.
Trendline Types
Choose from multiple regression types to best fit your data pattern. The type property determines which mathematical model is applied to calculate the trend line.
Linear
A linear trendline draws a straight line through the data, representing a constant rate of increase or decrease. Use type="Linear" for data with constant growth patterns like steady market trends, linear growth or simple forecasting scenarios.
Exponential
An exponential trendline models data that grows or declines at an accelerating rate. Set type="Exponential" for rapid growth patterns like technology adoption, viral trends, or compound interest calculations.
Logarithmic
A logarithmic trendline rises (or falls) quickly at first and then levels off. Use type="Logarithmic" for market saturation curves, learning curves, or scenarios where growth slows as it approaches a natural limit.
Polynomial
Polynomial trendlines fit curves with multiple peaks and valleys. Set type="Polynomial" and use polynomialOrder to control curve complexity. Ideal for data with multiple trend changes, datasets with multiple inflection points, or nonlinear relationships.
Power
A power trendline models data that follows a power-law relationship, where changes are proportional to magnitude. Use type="Power" for learning curves, cost reductions, or technology adoption patterns.
Moving Average
A moving average smooths out short-term noise to expose overall direction. Set type="MovingAverage" and use the period property to specify averaging intervals. Essential for financial analysis and removing noise from volatile data.
Data Labels
Add data labels to trendlines to display computed regression values at each calculated point.
Use ChartMarker with ChartDataLabel to show predicted values alongside actual data for easier comparison.
Customization
Customize trendlines to match your chart style and improve clarity:
- width — controls line thickness (2-6 recommended)
- fill — applies custom colors
- dashArray — sets dashed patterns for visual distinction e.g., "5,5" or "8,4,2,4"
- intercept — forces the line through a specific Y value (useful for baselines)
These options help visually separate trendlines from data series and support clearer interpretation.