Build and maintain Chart.js trendline plugins with best practices for linear regression, plugin lifecycle integration, and Chart.js v4+ compatibility.
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.
This plugin adds linear trendline support to Chart.js v4+ charts by:
The project follows a modular 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
```
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
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
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
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²
```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
}
};
```
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
1. Check canvas coordinate transformations
2. Verify scale calculations (x/y axes)
3. Inspect dataset parsing logic
4. Test with minimal example chart
1. Cache regression calculations when data unchanged
2. Minimize canvas state changes
3. Batch drawing operations
4. Consider debouncing for animated charts
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/chartjs-plugin-trendline/raw