Chart.js Plugin Trendline

You are an expert at building Chart.js plugins, specifically for adding trendline functionality to charts. This skill guides you through the architecture, coding standards, and workflow for developing trendline plugins that fit linear regression models and render them over bar or line charts.

Project Context

This plugin adds linear trendline support to Chart.js v4+ charts by:

Architecture Overview

The project follows a modular structure:

Directory Structure

```

├── src/

│ ├── index.js # Entry point

│ ├── components/

│ │ ├── label.js # Label rendering logic

│ │ └── trendline.js # Trendline drawing logic

│ ├── core/

│ │ └── plugin.js # Plugin definition & lifecycle

│ └── utils/

│ ├── drawing.js # Canvas drawing helpers

│ └── lineFitter.js # Linear regression math

├── example/

│ └── *.html # Demo charts

├── package.json

└── webpack.config.js

```

Key Components

Coding Standards

JavaScript Style

1. **Modern ES6+ syntax** - Use arrow functions, destructuring, const/let

2. **2-space indentation** - Consistent spacing throughout

3. **JSDoc comments** - Document all public methods using Google style:

```javascript

/**

* Calculates linear regression coefficients.

* @param {number[]} x - X-axis data points

* @param {number[]} y - Y-axis data points

* @returns {{slope: number, intercept: number}} Regression coefficients

*/

```

4. **Descriptive naming** - No abbreviations; use clear, full words

5. **Chart.js v4+ compatibility** - Ensure all code works with Chart.js version 4 and above

File Organization

Development Workflow

Making Changes

1. **Plugin lifecycle changes** (`plugin.js`):

- Align with Chart.js plugin API

- Use appropriate hooks (`beforeDraw`, `afterDatasetsDraw`, etc.)

- Test integration with different chart configurations

2. **Trendline rendering** (`trendline.js`):

- Test with multiple chart types (bar, line, scatter)

- Verify canvas drawing at different scales

- Ensure proper coordinate transformations

3. **Regression logic** (`lineFitter.js`):

- Validate mathematical accuracy

- Handle edge cases (single point, vertical lines)

- Optimize for performance with large datasets

Testing

1. **Manual validation**: Open `example/*.html` files in browser after code changes

2. **Multi-chart testing**: Verify trendlines render correctly across different chart types

3. **Visual inspection**: Check alignment, colors, and label positioning

Pre-Commit Checklist

Implementation Guidelines

Adding Trendline to Dataset

When implementing trendline support:

1. Extract data points from Chart.js dataset

2. Calculate linear regression using `lineFitter.js`

3. Transform regression line to canvas coordinates

4. Draw trendline using canvas context

5. Optionally render labels with equation/R²

Plugin Integration Pattern

```javascript

// plugin.js structure

export default {

id: 'trendline',

afterDatasetsDraw(chart, args, options) {

// 1. Iterate datasets

// 2. Check if trendline enabled

// 3. Calculate regression

// 4. Draw trendline

// 5. Draw labels

}

};

```

Canvas Drawing Best Practices

Restrictions

Do Not Modify

Always Preserve

Common Tasks

Adding New Regression Type

1. Create new fitter function in `lineFitter.js`

2. Update `trendline.js` to support new type

3. Add configuration option in plugin

4. Create example HTML demonstrating new type

Debugging Rendering Issues

1. Check canvas coordinate transformations

2. Verify scale calculations (x/y axes)

3. Inspect dataset parsing logic

4. Test with minimal example chart

Performance Optimization

1. Cache regression calculations when data unchanged

2. Minimize canvas state changes

3. Batch drawing operations

4. Consider debouncing for animated charts

Resources