Chart.js Scale Options — Axis Configuration and Customization
In this tutorial, you will learn about Chart.js Scale Options. We cover key concepts, practical examples, and best practices to help you master this topic.
Chart.js scale options control how axes display data, including scale type, tick formatting, grid lines, bounds, and multi-scale layouts.
What You'll Learn
By the end of this guide, you will configure linear, logarithmic, time, and category scales, customize tick formatting and grid appearance, set axis bounds and step sizes, and build charts with multiple Y axes.
Linear Scale
options: {
scales: {
y: {
type: 'linear',
beginAtZero: true,
max: 100,
ticks: {
stepSize: 10,
callback: function(value) {
return value + '%';
}
},
title: {
display: true,
text: 'Percentage'
}
}
}
}
Time Scale
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'month',
displayFormats: {
month: 'MMM yyyy'
},
tooltipFormat: 'MMM d, yyyy'
},
min: '2025-01-01',
max: '2025-12-31'
}
}
}
Logarithmic Scale
options: {
scales: {
y: {
type: 'logarithmic',
ticks: {
callback: function(value) {
return Number(value.toString());
}
}
}
}
}
Grid Line Customization
options: {
scales: {
x: {
grid: {
display: true,
color: '#e0e0e0',
drawBorder: true,
drawOnChartArea: true,
drawTicks: true,
tickLength: 8
}
}
}
}
Common Mistakes
1. Incorrect Scale Type for Data
Using linear scale with date strings. Use time scale for dates, category for labels.
2. Not Setting beginAtZero
For bar and area charts, not starting at zero can mislead viewers about magnitude.
3. Forgetting Time Adapter
Chart.js time scale requires the date-fns or luxon adapter. Install it separately.
4. Conflicting Axis ID Names
Axis IDs must be unique. Use 'x' and 'y' for defaults, 'y1' for secondary.
5. Tick Callback Performance
Complex callback functions run for every tick on every render. Cache expensive computations.
Practice Questions
Q1: What scale type should I use for dates?
A: type: 'time' with the appropriate date adapter plugin.
Q2: How do I format tick labels? A: Use ticks.callback function or ticks.format for number formats.
Q3: How do I set a custom min/max? A: Use min and max properties on the scale config.
Q4: What does drawOnChartArea do? A: Controls whether grid lines extend across the full chart area or only near the axis.
Q5: How do I add a second Y axis? A: Define a new scale (e.g., y1) and assign datasets via yAxisID.
Challenge: Build a chart with time X axis, dual Y axes (linear left, logarithmic right), and custom tick formatters.
FAQ
Try It Yourself
Build a chart with custom scale configuration.
<!DOCTYPE html>
<html>
<head>
<title>Scale Options Demo</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Custom Scale Demo</h2>
<canvas id="scaleChart" width="600" height="350"></canvas>
<script>
new Chart(document.getElementById('scaleChart'), {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Sales',
data: [10, 25, 40, 35, 50, 65],
borderColor: '#4ecdc4',
fill: false
}]
},
options: {
responsive: true,
scales: {
x: {
grid: { color: '#f0f0f0', drawBorder: false }
},
y: {
beginAtZero: true,
max: 80,
ticks: {
stepSize: 10,
callback: function(value) { return '$' + value + 'K'; }
},
grid: {
color: function(ctx) {
return ctx.tick.value === 40 ? '#ff6b35' : '#e8e8e8';
},
lineWidth: function(ctx) {
return ctx.tick.value === 40 ? 2 : 1;
}
}
}
}
}
});
</script>
</body>
</html>
What's Next
Customize tooltips and legends.
Tooltip Legend — Tooltip and legend configuration. Animations — Animation configuration.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro