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.
This skill inherits all available tools. When active, it can use any tool Claude has access to.
examples/dual-y-axis.htmlexamples/styled-axes.htmlexamples/time-scale.htmlreferences/advanced-axis-customization.mdreferences/date-adapters.mdComprehensive guide to configuring axes, scales, ticks, and grid lines in Chart.js.
| 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 |
| Type | Use Case | Import |
|---|---|---|
radialLinear | Radar/polar charts | RadialLinearScale |
Namespace: options.scales
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'
}
}
}
}
For numeric data:
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
grace: '5%', // Extra space beyond min/max
ticks: {
stepSize: 10, // Fixed step size
count: 11, // Approximate number of ticks
precision: 0 // Decimal places
}
}
}
For string labels:
scales: {
x: {
type: 'category',
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
offset: true, // Add padding to edges
ticks: {
autoSkip: true, // Skip labels if crowded
maxRotation: 45, // Max label rotation
minRotation: 0 // Min label rotation
}
}
}
Requires a date adapter. Install one:
npm install chartjs-adapter-date-fns date-fns
# or
npm install chartjs-adapter-moment moment
# or
npm install chartjs-adapter-luxon luxon
import 'chartjs-adapter-date-fns';
scales: {
x: {
type: 'time',
time: {
unit: 'day', // millisecond, second, minute, hour, day, week, month, quarter, year
displayFormats: {
day: 'MMM d' // Format string
},
tooltipFormat: 'PP', // Tooltip format
parser: 'yyyy-MM-dd' // Parse format
},
min: '2024-01-01',
max: '2024-12-31',
ticks: {
source: 'auto' // auto, data, labels
}
}
}
// ISO 8601 strings
data: ['2024-01-15', '2024-02-15', '2024-03-15']
// Date objects
data: [new Date(2024, 0, 15), new Date(2024, 1, 15)]
// Timestamps
data: [1705276800000, 1707955200000, 1710460800000]
// Object format
data: [
{ x: '2024-01-15', y: 10 },
{ x: '2024-02-15', y: 20 }
]
For exponential data:
scales: {
y: {
type: 'logarithmic',
min: 1, // Must be > 0
max: 1000000,
ticks: {
callback: (value) => {
if (value === 10 || value === 100 || value === 1000) {
return value.toLocaleString();
}
return '';
}
}
}
}
data: {
datasets: [
{
label: 'Revenue',
data: [1000, 2000, 3000],
yAxisID: 'y' // Left axis
},
{
label: 'Units',
data: [10, 20, 30],
yAxisID: 'y1' // Right axis
}
]
},
options: {
scales: {
y: {
type: 'linear',
position: 'left',
title: { display: true, text: 'Revenue ($)' }
},
y1: {
type: 'linear',
position: 'right',
title: { display: true, text: 'Units' },
grid: {
drawOnChartArea: false // Hide grid for this axis
}
}
}
}
scales: {
x: {
position: 'bottom',
title: { display: true, text: 'Months' }
},
x2: {
position: 'top',
title: { display: true, text: 'Quarters' },
grid: { drawOnChartArea: false }
}
}
scales: {
y: {
title: {
display: true,
text: 'Value',
color: '#666',
font: {
size: 14,
weight: 'bold'
},
padding: { top: 10, bottom: 10 }
}
}
}
scales: {
y: {
ticks: {
display: true,
color: '#666',
font: { size: 11 },
padding: 5,
align: 'center', // start, center, end
crossAlign: 'near', // near, center, far
autoSkip: true,
autoSkipPadding: 3,
maxTicksLimit: 11,
includeBounds: true,
// Custom formatting
callback: function(value, index, ticks) {
return '$' + value.toLocaleString();
}
}
}
}
// Currency
callback: (value) => '$' + value.toLocaleString()
// Percentage
callback: (value) => value + '%'
// Abbreviated numbers
callback: (value) => {
if (value >= 1000000) return (value / 1000000) + 'M';
if (value >= 1000) return (value / 1000) + 'K';
return value;
}
// Date formatting
callback: (value) => new Date(value).toLocaleDateString()
scales: {
x: {
grid: {
display: true,
color: 'rgba(0, 0, 0, 0.1)',
lineWidth: 1,
drawOnChartArea: true, // Draw grid in chart area
drawTicks: true, // Draw tick marks
tickLength: 8,
tickColor: '#666', // Tick mark color
offset: false,
z: -1 // Z-index (<= 0 under datasets)
}
},
y: {
grid: {
// Scriptable: different color for zero line
color: (context) => {
if (context.tick.value === 0) {
return 'rgba(0, 0, 0, 0.5)'; // Bold zero line
}
return 'rgba(0, 0, 0, 0.1)';
}
}
}
}
grid: { display: false }
Namespace: options.scales[scaleId].border - configures the axis border line (separate from grid lines).
scales: {
x: {
border: {
display: true, // Show axis border
color: '#666', // Border color
width: 2, // Border width in pixels
dash: [], // Solid line
dashOffset: 0,
z: 0 // Z-index (> 0 on top of datasets)
}
},
y: {
border: {
display: true,
color: 'rgba(0, 0, 0, 0.5)',
width: 1,
dash: [5, 5], // Dashed border
dashOffset: 0
}
}
}
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
datasets: [
{ label: 'A1', stack: 'Stack 0', data: [1, 2, 3] },
{ label: 'A2', stack: 'Stack 0', data: [2, 3, 4] },
{ label: 'B1', stack: 'Stack 1', data: [3, 4, 5] },
{ label: 'B2', stack: 'Stack 1', data: [4, 5, 6] }
]
For radar and polar area charts:
scales: {
r: {
angleLines: {
display: true,
color: 'rgba(0, 0, 0, 0.1)'
},
grid: {
circular: true // Circular or straight grid
},
pointLabels: {
display: true,
font: { size: 12 }
},
suggestedMin: 0,
suggestedMax: 100,
ticks: {
stepSize: 20,
backdropColor: 'transparent'
}
}
}
scales: {
y: {
min: 0,
max: 100
}
}
Data can exceed these bounds:
scales: {
y: {
suggestedMin: 0,
suggestedMax: 100
}
}
scales: {
y: {
grace: '5%', // Add 5% padding
// or
grace: 5 // Add 5 units
}
}
scales: {
y: {
beforeUpdate: (axis) => { /* ... */ },
afterUpdate: (axis) => { /* ... */ },
beforeBuildTicks: (axis) => { /* ... */ },
afterBuildTicks: (axis) => { /* ... */ },
beforeDataLimits: (axis) => { /* ... */ },
afterDataLimits: (axis) => { /* ... */ },
beforeTickToLabelConversion: (axis) => { /* ... */ },
afterTickToLabelConversion: (axis) => { /* ... */ },
beforeFit: (axis) => { /* ... */ },
afterFit: (axis) => { /* ... */ }
}
}
Set defaults for all scales:
// Linear scale defaults
Chart.defaults.scales.linear.min = 0;
// Category scale defaults
Chart.defaults.scales.category.ticks.autoSkip = true;
// All scales
Chart.defaults.scale.grid.color = 'rgba(0, 0, 0, 0.1)';
references/date-adapters.md for time scale adapter setupreferences/advanced-axis-customization.md for scriptable options, tick alignment, and dynamic positioningexamples/dual-y-axis.html for dual axis with mixed chart typesexamples/time-scale.html for time-based charts with date-fns adapterexamples/styled-axes.html for custom axis styling (borders, grids, ticks)