chartjs-plugin-trendline 3.1.1 → 3.2.0

package/README.md

@@ -1,149 +1,166 @@
-# 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](https://makanz.github.io/chartjs-plugin-trendline/)
-
-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
-
-```html
-<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`
-
-```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.
-
-### Linear Trendlines
-
-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,
-		}
-	}
-}
-```
-
-### 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.
-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).
-
-## Star History
-
-[![Star History Chart](https://api.star-history.com/svg?repos=Makanz/chartjs-plugin-trendline&type=Date)](https://star-history.com/#Makanz/chartjs-plugin-trendline&Date)
+# 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](https://makanz.github.io/chartjs-plugin-trendline/)
+
+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](./MIGRATION.md) for upgrade details.
+
+### Modern Bundlers (Vite, SvelteKit, Next.js, webpack 5+)
+
+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);
+```
+
+### Node.js (CommonJS)
+
+```js
+const { Chart } = require('chart.js');
+const ChartJSTrendline = require('chartjs-plugin-trendline');
+
+Chart.register(ChartJSTrendline);
+```
+
+### Browser (CDN)
+
+Load Chart.js first, then the plugin which will automatically register itself:
+
+```html
+<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>
+```
+
+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.
+
+### Linear Trendlines
+
+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,
+		}
+	}
+}
+```
+
+### 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.
+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).
+
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=Makanz/chartjs-plugin-trendline&type=Date)](https://star-history.com/#Makanz/chartjs-plugin-trendline&Date)

package/babel.config.js

@@ -1,3 +1,3 @@
-module.exports = {
-  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
-};
+export default {
+  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
+};

package/changelog.md

@@ -1,40 +1,40 @@
-# 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
-- Updated to version 3.0.0-beta.1 with modular code structure
-
-### New Features
-- Added trendline offset setting (`trendoffset`)
-- Added two new example files (barChartWithNullValues.html, scatterProjection.html)
-
-### Bug Fixes
-- Fixed trendline accuracy and boundary calculations
-- Corrected trendline rendering, projection, and data accuracy
-- Fixed trendline data processing issues
-
-### Testing & CI
-- Added comprehensive unit tests for all components (trendline, label, drawing utils, lineFitter)
-- Added GitHub Actions workflow for automated testing on PRs and main branch
-- Updated Node.js version to 22 in CI
-
-### Code Quality
-- Split code into modular structure with separate components
-- Added Copilot instructions for development
-- Updated Chart.js dependency to version 4.4.9
-
-### Documentation
-- Updated README with new features
+# 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
+- Updated to version 3.0.0-beta.1 with modular code structure
+
+### New Features
+- Added trendline offset setting (`trendoffset`)
+- Added two new example files (barChartWithNullValues.html, scatterProjection.html)
+
+### Bug Fixes
+- Fixed trendline accuracy and boundary calculations
+- Corrected trendline rendering, projection, and data accuracy
+- Fixed trendline data processing issues
+
+### Testing & CI
+- Added comprehensive unit tests for all components (trendline, label, drawing utils, lineFitter)
+- Added GitHub Actions workflow for automated testing on PRs and main branch
+- Updated Node.js version to 22 in CI
+
+### Code Quality
+- Split code into modular structure with separate components
+- Added Copilot instructions for development
+- Updated Chart.js dependency to version 4.4.9
+
+### Documentation
+- Updated README with new features
 - Added agent instructions for development workflow