← ClaudeAtlas

chartjs-developerslisted

This skill should be used when the user asks "Chart.js plugin", "custom Chart.js plugin", "Chart.js plugin hooks", "Chart.js beforeDraw", "Chart.js afterDraw", "custom chart type", "extend Chart.js", "Chart.js API", "Chart.js update", "Chart.js destroy", "Chart.js methods", "Chart.js events", "Chart.js canvas", "Chart.js TypeScript", "custom scale", "Chart.js DatasetController", "Chart.js Scale", or needs help creating custom Chart.js v4.5.1 plugins, extensions, custom chart types, custom scales, or using the API.
Riltonbn/chartjs-expert · ★ 0 · Code & Development · score 72
Install: claude install-skill Riltonbn/chartjs-expert
# Chart.js Developer Guide (v4.5.1) Advanced guide for creating custom plugins, extending Chart.js, and using the API. ## Chart Instance API ### Creating a Chart ```javascript const chart = new Chart(ctx, { type: 'bar', data: { /* ... */ }, options: { /* ... */ } }); ``` ### Chart Methods ```javascript // Update chart chart.update(); // With animation chart.update('none'); // Without animation chart.update('active'); // Only animate active elements // Data manipulation chart.data.datasets[0].data.push(newValue); chart.data.labels.push(newLabel); chart.update(); // Resize chart.resize(); chart.resize(width, height); // Reset to original state chart.reset(); // Destroy chart instance chart.destroy(); // Convert to image const base64Image = chart.toBase64Image(); const base64Image = chart.toBase64Image('image/png', 1.0); // Show/hide datasets chart.hide(datasetIndex); chart.show(datasetIndex); chart.isDatasetVisible(datasetIndex); chart.setDatasetVisibility(datasetIndex, visible); // Toggle data visibility (pie, doughnut, polar, bar) chart.toggleDataVisibility(index); chart.getDataVisibility(index); // Animation control chart.stop(); // Stop current animation chart.render(); // Redraw without updating data chart.clear(); // Clear canvas // Active elements chart.setActiveElements([{ datasetIndex: 0, index: 1 }]); // Dataset info chart.getVisible