chartjs-plugin-trendline

This plugin draws linear and exponential trendlines in your Chart. It has been tested with Chart.js version 4.4.9.

📊 View Live Examples

See the plugin in action with interactive examples for different chart types.

Installation

Load directly in the browser

Load Chart.js first, then the plugin which will automatically register itself with Chart.js

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>

As a Chart.JS plugin

Install & import the plugin via npm:

npm i chart.js chartjs-plugin-trendline

import ChartJS from 'chart.js';
import chartTrendline from 'chartjs-plugin-trendline';

ChartJS.plugins.register(chartTrendline);

Configuration

To configure the trendline plugin you simply add a new config options to your dataset in your chart config.

Linear Trendlines

For linear trendlines (straight lines), use the trendlineLinear configuration:

{
	trendlineLinear: {
		colorMin: Color,
		colorMax: Color,
		lineStyle: string, // "dotted" | "solid" | "dashed" | "dashdot"
		width: number,
		xAxisKey: string, // optional
		yAxisKey: string, // optional
		projection: boolean, // optional
		trendoffset: number, // optional, if > 0 skips first n elements, if < 0 uses last n elements
		// optional
		label: {
			color: Color,
			text: string,
			display: boolean,
			displayValue: boolean, // shows slope value
			offset: number,
			percentage: boolean,
			font: {
				family: string,
				size: number,
			}
		},
		// optional
		legend: {
			text: string,
			strokeStyle: Color,
			fillStyle: Color,
			lineCap: string,
			lineDash: number[],
			lineWidth: number,
		}
	}
}

Exponential Trendlines

For exponential trendlines (curves of the form y = a × e^(b×x)), use the trendlineExponential configuration:

{
	trendlineExponential: {
		colorMin: Color,
		colorMax: Color,
		lineStyle: string, // "dotted" | "solid" | "dashed" | "dashdot"
		width: number,
		xAxisKey: string, // optional
		yAxisKey: string, // optional
		projection: boolean, // optional
		trendoffset: number, // optional, if > 0 skips first n elements, if < 0 uses last n elements
		// optional
		label: {
			color: Color,
			text: string,
			display: boolean,
			displayValue: boolean, // shows exponential parameters (a, b)
			offset: number,
			font: {
				family: string,
				size: number,
			}
		},
		// optional
		legend: {
			text: string,
			strokeStyle: Color,
			fillStyle: Color,
			lineCap: string,
			lineDash: number[],
			lineWidth: number,
		}
	}
}