← ClaudeAtlas

chartjs-axeslisted

This skill should be used when the user asks "Chart.js axes", "Chart.js scales", "Chart.js x-axis", "Chart.js y-axis", "Chart.js time axis", "Chart.js logarithmic scale", "Chart.js axis labels", "Chart.js ticks", "Chart.js grid lines", "Chart.js multiple axes", "Chart.js dual axis", "Chart.js axis title", "Chart.js axis range", "Chart.js min max", "stacked axes", "Chart.js radial axis", or needs help configuring Chart.js v4.5.1 axes and scales.
Riltonbn/chartjs-expert · ★ 0 · Web & Frontend · score 72
Install: claude install-skill Riltonbn/chartjs-expert
# Chart.js Axes Configuration (v4.5.1) Comprehensive guide to configuring axes, scales, ticks, and grid lines in Chart.js. ## Axis Types ### Cartesian Axes (x/y) | Type | Use Case | Import | |------|----------|--------| | `category` | String labels | `CategoryScale` | | `linear` | Numeric data | `LinearScale` | | `logarithmic` | Exponential data | `LogarithmicScale` | | `time` | Date/time data | `TimeScale` | | `timeseries` | Time series data | `TimeSeriesScale` | ### Radial Axes (r) | Type | Use Case | Import | |------|----------|--------| | `radialLinear` | Radar/polar charts | `RadialLinearScale` | ## Basic Axis Configuration Namespace: `options.scales` ```javascript options: { scales: { x: { type: 'category', // Scale type position: 'bottom', // bottom, top, left, right display: true, // Show axis title: { display: true, text: 'X Axis Label' } }, y: { type: 'linear', position: 'left', beginAtZero: true, title: { display: true, text: 'Y Axis Label' } } } } ``` ## Linear Scale For numeric data: ```javascript scales: { y: { type: 'linear', min: 0, // Minimum value max: 100, // Maximum value suggestedMin: 0, // Suggested min (can be exceeded by data) suggestedMax: 100, // Suggested max beginAtZero: true, // Force zero origin g