https://github.com/Makanz/chartjs-plugin-trendline

This plugin draws an linear trendline in your Chart. Made for Chart.js > 3.0
https://github.com/Makanz/chartjs-plugin-trendline

chartjs-plugin trendline

Last synced: about 2 months ago
JSON representation

This plugin draws an linear trendline in your Chart. Made for Chart.js > 3.0

• Host: GitHub
• URL: https://github.com/Makanz/chartjs-plugin-trendline
• Owner: Makanz
• License: mit
• Created: 2017-11-27T10:36:36.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2024-01-24T21:28:47.000Z (12 months ago)
• Last Synced: 2024-04-24T16:24:38.295Z (9 months ago)
• Topics: chartjs-plugin, trendline
• Language: HTML
• Homepage:
• Size: 266 KB
• Stars: 79
• Watchers: 4
• Forks: 57
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - trendline

README

        
# chartjs-plugin-trendline

This plugin draws an linear trendline in your Chart.

It has been tested with Chart.js version 4.4.4.

## Installation

#### Load directly in the browser

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

```html

```

#### As a Chart.JS plugin

Install & import the plugin via npm:

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

```js

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.

```javascript

{

	trendlineLinear: {

		colorMin: Color

		colorMax: Color,

		lineStyle: string, // "dotted" | "solid" | "dashed" | "dashdot"

		width: number,

		xAxisKey: string, // optional

		yAxisKey: string, // optional

		projection: boolean, // optional

		// optional

		label: {

			color: Color,

			text: string,

			display: boolean,

			displayValue: boolean,

			offset: number,

			percentage: boolean,

			font: {

				family: string,

				size: number,

			}

		},

		// optional

		legend: {

			text: string,

			strokeStyle: Color,

			fillStyle: Color,

			lineCap: string,

			lineDash: number[],

			lineWidth: number,

		}

	}

}

```

## Supported chart types

-   bar

-   line

-   scatter

## Contributing

Pull requests and issues are always welcome.

For bugs and feature requests, [please create an issue](https://github.com/Makanz/chartjs-plugin-trendline/issues).

## License

chartjs-plugin-trendline.js is available under the [MIT license](http://opensource.org/licenses/MIT).