Animated Chart.js Skill

This skill provides instructions for transforming a static chart image into an interactive, animated chart using the Chart.js library within a standalone HTML file.

1. Image Analysis

• Carefully analyze the provided chart image.
• Identify the chart type (e.g., line, bar, pie, doughnut, radar).
• Extract the data points, axes labels, and legends. Estimate values as accurately as possible if exact numbers are not present.
• Extract the color palette used in the image (line colors, fill colors, background colors).

2. HTML and Chart.js Setup

• Create a standalone HTML file.
• Include the Chart.js library via CDN (e.g., <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>).
• Set up a <canvas> element for the chart with appropriate dimensions.
• Add basic CSS to ensure the chart is displayed correctly and beautifully (centered, proper padding, matching the image's background if any).