Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 59 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# chartjs-plugin-trendline

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

## 📊 [View Live Examples](https://makanz.github.io/chartjs-plugin-trendline/)
Expand Down Expand Up @@ -35,6 +35,10 @@ ChartJS.plugins.register(chartTrendline);

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:

```javascript
{
trendlineLinear: {
Expand All @@ -51,7 +55,7 @@ To configure the trendline plugin you simply add a new config options to your da
color: Color,
text: string,
display: boolean,
displayValue: boolean,
displayValue: boolean, // shows slope value
offset: number,
percentage: boolean,
font: {
Expand All @@ -72,12 +76,65 @@ To configure the trendline plugin you simply add a new config options to your da
}
```

### Exponential Trendlines

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](./example/lineChart.html)
- [Exponential Trendline Example](./example/exponentialChart.html)
- [Bar Chart with Trendline](./example/barChart.html)
- [Scatter Chart with Trendline](./example/scatterChart.html)

## 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.
Expand Down
13 changes: 13 additions & 0 deletions changelog.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
# Changelog 3.1.0

### New Features
- Added exponential trendline support with `trendlineExponential` configuration
- Exponential trendlines fit curves of the form y = a × e^(b×x)
- All existing styling options (colors, width, lineStyle, projection, etc.) work with exponential trendlines
- Added comprehensive test coverage for exponential functionality
- Added exponential trendline example (exponentialChart.html)

### Improvements
- Updated README with exponential trendline documentation
- Enhanced package description to mention exponential support

# Changelog 3.0.0

### Breaking Changes
Expand Down
2 changes: 1 addition & 1 deletion dist/chartjs-plugin-trendline.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading