Home Components Support Pricing About Log in

Trendline Chart

BptChartTrendline

Trendline chart — fits a regression model through a cloud of (X, Y) points and renders the resulting line, optional 95% confidence band, optional R² annotation, and the underlying data dots. Switch the dataset and noise level to see how the fit quality changes. Built on the BPT chart foundation — palette-aware, scroll-zoom, and keyboard-accessible via a hidden data table.

Trendline Chart Parameters

Study hours vs exam score
Label	X	Y
	0	44.4
	1.3	31.4
	2.6	37.6
	3.9	23.6
	5.2	41.6
	6.5	42.4
	7.7	39.2
	9	45.2
	10.3	59.2
	11.6	32.7
	12.9	56.3
	14.2	50.8
	15.5	35.8
	16.8	54.4
	18.1	61.4
	19.4	42.9
	20.6	66
	21.9	53.9
	23.2	81.4
	24.5	68.6
	25.8	53.5
	27.1	73.1
	28.4	69.7
	29.7	81.1
	31	73.2
	32.3	68.8
	33.5	80.6
	34.8	63.3
	36.1	75.5
	37.4	69.1
	38.7	88.4
	40	82

Current Configuration

📋

<BptChartTrendline Data="@Data"
                   Width="680"
                   Height="400"
                   XAxisLabel="Hours studied"
                   YAxisLabel="Exam score"
                   Title="Study hours vs exam score"
                   OnElementClick="HandleClick" />

@code {
private readonly IReadOnlyList<BptChartTrendlinePoint> Data = new BptChartTrendlinePoint[]
{
    new(X:  0, Y: 35.2), new(X:  4, Y: 41.7), new(X:  8, Y: 46.3),
    new(X: 12, Y: 50.1), new(X: 16, Y: 55.6), new(X: 20, Y: 60.4),
    // …more samples
};

private void HandleClick(BptChartElementEvent e) {
    // Click handler — fires regardless of TooltipMode.
}
}