chartjs-chart-typeslisted

This skill should be used when the user asks "how to create a line chart", "Chart.js bar chart", "pie chart Chart.js", "doughnut chart", "radar chart", "polar area chart", "bubble chart", "scatter chart", "mixed chart", "combo chart", "area chart", "stacked chart", "horizontal bar chart", "Chart.js chart types", "dataset properties", "chart data structure", or needs help implementing specific Chart.js v4.5.1 chart types.
Riltonbn/chartjs-expert · ★ 0 · Web & Frontend · score 72

Install: claude install-skill Riltonbn/chartjs-expert

# Chart.js Chart Types (v4.5.1) Complete guide to all Chart.js chart types, their configuration, and dataset properties. ## Available Chart Types | Type | Description | Use Case | |------|-------------|----------| | `line` | Line chart | Trends over time | | `bar` | Bar chart | Comparing categories | | `pie` | Pie chart | Parts of a whole | | `doughnut` | Doughnut chart | Parts of a whole with center | | `radar` | Radar/spider chart | Multivariate data comparison | | `polarArea` | Polar area chart | Cyclical data | | `bubble` | Bubble chart | Three dimensions | | `scatter` | Scatter plot | Correlation analysis | ## Line Chart Show trends and changes over time: ```javascript new Chart(ctx, { type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [{ label: 'Sales', data: [65, 59, 80, 81, 56], fill: false, borderColor: 'rgb(75, 192, 192)', tension: 0.1 // 0 = straight lines, 0.4 = curved }] } }); ``` ### Key Line Properties | Property | Type | Description | |----------|------|-------------| | `tension` | number | Bezier curve tension (0-1) | | `fill` | boolean/string | Fill area under line | | `stepped` | boolean/string | Stepped line interpolation | | `borderDash` | number[] | Dashed line pattern | | `pointRadius` | number | Data point size | | `pointStyle` | string | Point shape (circle, rect, triangle, etc.) | | `spanGaps` | boolean | Connect over null values | ### Vertical Line Chart Flip axes w