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

> Note: Version 3.2.0+ supports ES modules (ESM) for modern bundlers like Vite, SvelteKit, and Next.js. See MIGRATION.md for upgrade details.

$3

Install via npm:

``bash
npm i chart.js chartjs-plugin-trendline
`

Import and register with Chart.js:

`js
import { Chart } from 'chart.js';
import ChartJSTrendline from 'chartjs-plugin-trendline';

Chart.register(ChartJSTrendline);
`

$3

`js
const { Chart } = require('chart.js');
const ChartJSTrendline = require('chartjs-plugin-trendline');

Chart.register(ChartJSTrendline);
`

$3

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

`html


`

The plugin is now available globally as ChartJSTrendline and auto-registers with Chart.js.

Configuration

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

$3

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

`javascript
{
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,
}
}
}
`

$3

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

`javascript
{
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,
}
}
}
`

Note: Exponential trendlines work best with positive y-values. The equation fitted is y = a × e^(b×x), where:
- a is the coefficient (scaling factor)
- b` is the growth rate (positive for growth, negative for decay)

Examples

- Linear Trendline Example
- Exponential Trendline Example
- Bar Chart with Trendline
- Scatter Chart with Trendline

Supported chart types

- bar
- line
- scatter

Both linear and exponential trendlines are supported for all chart types.

Contributing

Pull requests and issues are always welcome.
For bugs and feature requests, please create an issue.

License

chartjs-plugin-trendline.js is available under the MIT license.

Star History