Wheel Dimension Calculator

:root {
–primary-color: #004a99;
–secondary-color: #ffffff;
–success-color: #28a745;
–background-color: #f8f9fa;
–text-color: #333;
–border-color: #ddd;
–shadow-color: rgba(0, 0, 0, 0.1);
}
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(–text-color);
background-color: var(–background-color);
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: var(–secondary-color);
border-radius: 8px;
box-shadow: 0 4px 15px var(–shadow-color);
}
.header {
background-color: var(–primary-color);
color: var(–secondary-color);
padding: 20px;
text-align: center;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
margin-bottom: 20px;
}
.header h1 {
margin: 0;
font-size: 2.5em;
}
.calculator-section {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
margin-bottom: 30px;
}
@media (min-width: 768px) {
.calculator-section {
grid-template-columns: 1fr 1fr;
}
}
.loan-calc-container {
padding: 25px;
background-color: var(–secondary-color);
border-radius: 8px;
box-shadow: 0 2px 10px var(–shadow-color);
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: var(–primary-color);
}
.input-group input[type=”number”],
.input-group select {
width: calc(100% – 22px);
padding: 10px;
border: 1px solid var(–border-color);
border-radius: 5px;
font-size: 1em;
transition: border-color 0.3s ease;
}
.input-group input[type=”number”]:focus,
.input-group select:focus {
border-color: var(–primary-color);
outline: none;
}
.input-group .helper-text {
font-size: 0.85em;
color: #666;
margin-top: 5px;
display: block;
}
.input-group .error-message {
color: #dc3545;
font-size: 0.8em;
margin-top: 5px;
display: block;
min-height: 1.2em; /* Prevent layout shift */
}
.button-group {
display: flex;
gap: 10px;
margin-top: 25px;
flex-wrap: wrap;
}
.button-group button,
.button-group input[type=”button”] {
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
font-weight: bold;
transition: background-color 0.3s ease, transform 0.2s ease;
white-space: nowrap;
}
.button-group button:hover,
.button-group input[type=”button”]:hover {
transform: translateY(-2px);
}
.button-group button.primary-btn,
.button-group input[type=”button”].primary-btn {
background-color: var(–primary-color);
color: var(–secondary-color);
}
.button-group button.primary-btn:hover {
background-color: #003366;
}
.button-group button.reset-btn {
background-color: #6c757d;
color: var(–secondary-color);
}
.button-group button.reset-btn:hover {
background-color: #5a6268;
}
.button-group button.copy-btn {
background-color: var(–success-color);
color: var(–secondary-color);
}
.button-group button.copy-btn:hover {
background-color: #218838;
}
.results-container {
padding: 25px;
background-color: var(–secondary-color);
border-radius: 8px;
box-shadow: 0 2px 10px var(–shadow-color);
}
.results-container h3 {
color: var(–primary-color);
margin-top: 0;
margin-bottom: 20px;
border-bottom: 2px solid var(–border-color);
padding-bottom: 10px;
}
.result-item {
margin-bottom: 15px;
padding: 10px;
background-color: #e9ecef;
border-radius: 5px;
}
.result-item strong {
color: var(–primary-color);
display: inline-block;
min-width: 200px; /* Align labels */
}
.highlight-result {
background-color: var(–success-color);
color: var(–secondary-color);
padding: 15px;
border-radius: 8px;
text-align: center;
margin-bottom: 20px;
font-size: 1.8em;
font-weight: bold;
box-shadow: 0 4px 10px rgba(40, 167, 69, 0.4);
}
.formula-explanation {
font-size: 0.9em;
color: #555;
margin-top: 20px;
padding: 15px;
background-color: #f0f0f0;
border-left: 4px solid var(–primary-color);
border-radius: 5px;
}
.tables-charts-section {
margin-top: 40px;
padding: 25px;
background-color: var(–secondary-color);
border-radius: 8px;
box-shadow: 0 2px 10px var(–shadow-color);
}
.tables-charts-section h3 {
color: var(–primary-color);
margin-top: 0;
margin-bottom: 20px;
border-bottom: 2px solid var(–border-color);
padding-bottom: 10px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 25px;
}
th, td {
padding: 12px;
text-align: left;
border: 1px solid var(–border-color);
}
th {
background-color: var(–primary-color);
color: var(–secondary-color);
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
caption {
font-size: 1.1em;
font-weight: bold;
color: var(–primary-color);
margin-bottom: 10px;
caption-side: top;
text-align: left;
}
canvas {
width: 100% !important;
height: auto !important;
border: 1px solid var(–border-color);
border-radius: 5px;
}
.article-content {
margin-top: 40px;
padding: 25px;
background-color: var(–secondary-color);
border-radius: 8px;
box-shadow: 0 2px 10px var(–shadow-color);
}
.article-content h2 {
color: var(–primary-color);
margin-top: 30px;
margin-bottom: 15px;
border-bottom: 1px solid var(–border-color);
padding-bottom: 8px;
}
.article-content h3 {
color: #0056b3;
margin-top: 20px;
margin-bottom: 10px;
}
.article-content p,
.article-content ul,
.article-content ol {
margin-bottom: 20px;
font-size: 1.05em;
}
.article-content ul,
.article-content ol {
padding-left: 20px;
}
.article-content a {
color: var(–primary-color);
text-decoration: none;
font-weight: bold;
}
.article-content a:hover {
text-decoration: underline;
}
.faq-item {
margin-bottom: 15px;
}
.faq-item strong {
display: block;
color: var(–primary-color);
cursor: pointer;
margin-bottom: 5px;
}
.faq-item p {
margin-left: 15px;
font-size: 0.95em;
color: #555;
}
.related-tools ul {
list-style: none;
padding: 0;
}
.related-tools li {
margin-bottom: 15px;
padding: 10px;
border: 1px solid var(–border-color);
border-radius: 5px;
background-color: #f8f9fa;
}
.related-tools li strong {
display: block;
color: var(–primary-color);
margin-bottom: 5px;
}
.related-tools li p {
font-size: 0.9em;
color: #666;
margin-bottom: 0;
}
.footer {
text-align: center;
padding: 20px;
margin-top: 40px;
font-size: 0.9em;
color: #777;
border-top: 1px solid var(–border-color);
}

Wheel & Tire Fitment Calculator

Input your current wheel and tire dimensions, and the desired new wheel dimensions to see the impact on fitment, speedometer accuracy, and clearance.

---

Understanding Wheel Dimensions and Their Impact

What is Wheel Dimension Analysis?

Wheel dimension analysis refers to the process of evaluating how changes in wheel and tire specifications affect a vehicle’s performance, aesthetics, and functionality. This involves understanding key metrics such as wheel diameter, width, offset, bolt pattern, and tire aspect ratio. By accurately calculating these dimensions, enthusiasts and owners can make informed decisions about upgrading their wheels and tires, ensuring proper fitment, avoiding clearance issues, and maintaining speedometer accuracy. This type of analysis is crucial for anyone looking to customize their vehicle’s stance or improve its handling characteristics. It helps answer critical questions about whether a new set of wheels will rub against the fenders or suspension components, or how much the vehicle’s gearing effectively changes due to altered tire size. The primary keyword, wheel dimension calculator, is central to this analysis, providing a quantitative tool for these estimations.

Who should use it:

• Vehicle owners planning to install aftermarket wheels.
• Enthusiasts looking to change tire sizes for performance or aesthetic reasons.
• Individuals concerned about speedometer accuracy after a tire size change.
• Mechanics and tire shops assisting customers with wheel and tire selection.
• Anyone curious about the physical constraints and implications of different wheel and tire combinations on their vehicle.

Common misconceptions:

• “Bigger wheels always mean better handling.” – Not necessarily. Larger wheels often mean heavier unsprung weight and lower-profile tires, which can negatively impact ride quality and grip on uneven surfaces.
• “Offset doesn’t matter as much as width.” – Incorrect. Offset is critical for proper suspension and fender clearance. An incorrect offset can cause rubbing, bearing stress, or even interfere with braking components.
• “Any bolt pattern will fit if you use adapters.” – Adapters can introduce their own issues, including increased stress on wheel studs and potential vibration problems. Matching the bolt pattern is always the safest approach.
• “Speedometer error is negligible.” – Even small errors can lead to consistent under- or over-estimation of speed, affecting traffic law compliance and fuel economy calculations. A good wheel dimension calculator helps prevent this.

Wheel Dimension Calculator Formula and Mathematical Explanation

The core of a wheel dimension calculator lies in accurately converting tire and wheel specifications into measurable physical dimensions and understanding their relationships. Here’s a breakdown of the key calculations:

1. Tire Width (mm): This is usually given in millimeters directly (e.g., 245mm). If given in inches, it needs conversion (1 inch = 25.4 mm).
2. Tire Sidewall Height (mm): Calculated from the aspect ratio (AR) and tire width (TW in mm).
   
   Sidewall Height (mm) = (TW_mm * AR) / 100
3. Tire Overall Diameter (inches): This is the sum of the wheel diameter and twice the sidewall height (converted to inches).
   
   Tire Overall Diameter (in) = Wheel Diameter (in) + 2 * (Sidewall Height_mm / 25.4)
4. Tire Overall Diameter (mm):
   
   Tire Overall Diameter (mm) = Wheel Diameter (in) * 25.4 + 2 * Sidewall Height_mm
5. Speedometer Error (%): Compares the new overall diameter to the old one.
   
   Speedometer Error (%) = ((New Overall Diameter - Old Overall Diameter) / Old Overall Diameter) * 100
   A positive percentage means the speedometer will read slower than actual speed; a negative percentage means it will read faster.
6. Inner Clearance (mm): This measures how close the inside edge of the tire/wheel assembly comes to the vehicle’s suspension components (strut, control arm). It depends on the wheel’s inner mounting surface position relative to the hub face (determined by offset) and the wheel width.
   
   Inner Clearance (mm) = Current Offset (mm) - New Offset (mm) + (New Wheel Width (in) - Current Wheel Width (in)) / 2 * 25.4
   Note: A *positive* result indicates the new wheel moves *inward* relative to the old one. A negative result means it moves outward. This calculation needs careful interpretation regarding suspension geometry. This formula provides a simplified view: it calculates how much the inner lip of the new wheel moves inward compared to the old wheel. A large positive value means it moves significantly inward, increasing clearance. A large negative value means it moves outward, potentially causing interference.
7. Outer Clearance (mm): This measures how close the outside edge of the tire/wheel assembly comes to the fender.
   
   Outer Clearance (mm) = Current Offset (mm) - New Offset (mm) - (New Wheel Width (in) - Current Wheel Width (in)) / 2 * 25.4
   Note: A *positive* result indicates the new wheel moves *outward* relative to the old one. A negative result means it moves inward. This formula calculates how much the outer lip of the new wheel moves outward compared to the old wheel. A large positive value means it moves outward, potentially hitting the fender. A large negative value means it moves inward.

Variables Table

Key Variables in Wheel Dimension Calculation

Variable Name	Meaning	Unit	Typical Range
Wheel Diameter	The diameter of the wheel rim.	Inches (in)	14 – 26+
Wheel Width	The distance between the wheel’s bead seats.	Inches (in)	5.0 – 12.0+
Tire Aspect Ratio	Sidewall height as a percentage of tire width.	Percent (%)	20 – 80
Tire Width	The overall width of the tire.	Millimeters (mm)	175 – 335+
Wheel Offset	Distance from the wheel’s mounting surface to the centerline of the wheel.	Millimeters (mm)	-50 – +70
Bolt Pattern	Number of lug holes and the diameter of the bolt circle.	e.g., 5×114.3	Common patterns vary by vehicle manufacturer.
Overall Diameter	The total diameter of the tire and wheel assembly.	Inches (in) or Millimeters (mm)	Varies widely based on vehicle type.
Speedometer Error	The percentage difference in indicated speed versus actual speed.	Percent (%)	-10% to +10% (ideally near 0%)
Clearance	Space between the tire/wheel and vehicle components (suspension/fender).	Millimeters (mm)	Positive values indicate space; negative values indicate interference.

Practical Examples (Real-World Use Cases)

Example 1: Upgrading to Larger Wheels

Scenario: A driver has a sedan with stock wheels and wants to upgrade for a sportier look and potentially better handling on dry pavement. They are considering moving from 17-inch wheels to 18-inch wheels.

Current Setup:

• Wheel Diameter: 17 inches
• Wheel Width: 7.5 inches
• Tire Profile: 245/45R17 (Aspect Ratio: 45)
• Offset: 40 mm
• Bolt Pattern: 5×114.3

New Setup:

• Wheel Diameter: 18 inches
• Wheel Width: 8.0 inches
• Tire Profile: 235/40R18 (Aspect Ratio: 40)
• Offset: 35 mm
• Bolt Pattern: 5×114.3

Calculator Output:

• Overall Diameter Difference: -0.1 inches (-2.5 mm)
• Speedometer Error: -0.5% (Speedometer will read slightly slower than actual speed)
• Tire Overall Width: 235 mm (Narrower than stock)
• Inner Clearance Change: +6.5 mm (New wheel sits further inwards)
• Outer Clearance Change: -16.5 mm (New wheel sits further outwards towards fender)
• Main Result: Minor negative change in overall diameter (-0.5% error), new wheel sits 16.5mm further out potentially risking fender rub with suspension compression.

Financial Interpretation: The change is relatively minor. The speedometer error is small enough for most legal purposes. The key concern is the outer clearance; the driver should ensure there is adequate fender gap, especially if planning to lower the suspension or carry heavy loads. The cost of new wheels and tires is significant, so verifying fitment beforehand via a wheel dimension calculator prevents costly mistakes.

Example 2: Off-Road Truck Upgrade

Scenario: A truck owner wants to fit larger, more aggressive off-road tires and wheels, potentially impacting ride height and speedometer accuracy.

Current Setup:

• Wheel Diameter: 18 inches
• Wheel Width: 8.0 inches
• Tire Profile: 275/65R18 (Aspect Ratio: 65)
• Offset: 25 mm
• Bolt Pattern: 6×139.7

New Setup:

• Wheel Diameter: 17 inches
• Wheel Width: 9.0 inches
• Tire Profile: 285/70R17 (Aspect Ratio: 70)
• Offset: 0 mm
• Bolt Pattern: 6×139.7

Calculator Output:

• Overall Diameter Difference: +2.4 inches (+61 mm)
• Speedometer Error: +7.5% (Speedometer will read significantly slower than actual speed)
• Tire Overall Width: 285 mm (Wider than stock)
• Inner Clearance Change: -25 mm (New wheel sits further inwards)
• Outer Clearance Change: +10 mm (New wheel sits slightly further outwards)
• Main Result: Increased overall diameter provides ~1.2 inches more ground clearance per side. Speedometer error requires recalibration. New wheel sits 25mm further inward, potentially closer to suspension components. Outer position is slightly more aggressive.

Financial Interpretation: This is a substantial change. The larger tires offer improved off-road capability and ground clearance, but the speedometer error is significant and likely requires recalibration (an additional cost). The inward shift of the wheel (25mm) needs careful inspection for suspension clearance. The wider stance and potentially larger diameter might also require fender modifications or suspension lifts. This is a classic use case for a detailed wheel dimension calculator to avoid costly fitment issues.

How to Use This Wheel Dimension Calculator

Our wheel dimension calculator is designed for simplicity and accuracy, helping you understand the implications of changing your vehicle’s wheels and tires.

1. Input Current Specifications: In the “Current” section, accurately enter your vehicle’s existing wheel diameter (in inches), wheel width (in inches), tire aspect ratio (percentage), wheel offset (in millimeters), and bolt pattern. If you are unsure about your current specs, consult your vehicle’s owner’s manual or look for markings on your current tire sidewall and wheel.
2. Input New Specifications: In the “New” section, enter the specifications for the wheels and tires you are considering. This includes the new wheel diameter, new wheel width, new tire aspect ratio, new offset, and new bolt pattern.
3. Click “Calculate Fitment”: Once all fields are populated, click the “Calculate Fitment” button.
4. Analyze Results: The calculator will display several key metrics:
   • Highlight Result: A summary of the most critical change, often focusing on the overall diameter difference or potential fitment issues.
   • Intermediate Values: Detailed breakdowns including Diameter Difference, Speedometer Error, Tire Overall Width, and Clearance estimations (Inner and Outer).
   • Comparison Table: A comprehensive table showing a side-by-side comparison of all input parameters and their differences.
   • Clearance Chart: A visual representation comparing the inner and outer clearance changes.
5. Interpret Results:
   • Diameter Difference & Speedometer Error: Aim for a difference close to zero. Significant deviations (typically > 3%) will affect speedometer accuracy and may impact the effectiveness of ABS and traction control systems. A positive error means your speedometer reads higher than your actual speed (you’re going faster than indicated); negative error means your speedometer reads lower (you’re going slower).
   • Clearance (Inner & Outer): Positive values for Inner Clearance mean the new wheel moves further away from the suspension. Negative values mean it moves closer. Positive values for Outer Clearance mean the new wheel moves further out towards the fender. Negative values mean it moves further in. Aim for safe clearance (e.g., > 5-10mm) to avoid rubbing against suspension components or fenders, especially under load or cornering.
   • Bolt Pattern: Ensure the new bolt pattern exactly matches your vehicle’s hub. Using adapters is possible but adds complexity and potential risks.
6. Make Informed Decisions: Use the results to confirm if your desired wheel and tire combination will fit correctly and function as expected. If clearance issues are indicated, you might need to consider different wheel offsets, widths, tire sizes, or even suspension modifications. Always double-check fitment with a professional if unsure.
7. Reset: Use the “Reset” button to clear all fields and start over.
8. Copy Results: Use the “Copy Results” button to copy a summary of the key findings to your clipboard for easy sharing or documentation.

Key Factors That Affect Wheel Dimension Calculator Results

While the calculations performed by a wheel dimension calculator are based on straightforward geometry, several real-world factors can influence the actual fitment and performance:

1. Tire Sidewall Construction: Tires are not perfectly round. The actual shape, tread pattern aggressiveness, and internal construction can affect clearances and ride quality beyond simple aspect ratio calculations.
2. Suspension Geometry: Different vehicles have unique suspension designs (e.g., MacPherson strut vs. double wishbone). The available space and the way the wheel moves during suspension travel are complex and not fully captured by basic offset calculations. This is why consulting vehicle-specific fitment guides is crucial.
3. Fender Liners and Body Modifications: Plastic fender liners, rolled fender lips, or aftermarket fender flares can significantly alter the available outer clearance. Aggressive off-road use might necessitate modifications like fender trimming or the use of aftermarket fenders.
4. Brake System Clearance: Larger brake calipers and rotors, especially those found on performance vehicles or upgraded systems, can interfere with the inside of the wheel spokes or barrel. The calculator primarily focuses on the wheel’s offset and width relative to the hub, not spoke design.
5. Tire Wear and Inflation Pressure: Tires can wear unevenly, and slight variations in inflation pressure can alter the tire’s effective profile and width, subtly impacting clearances and speedometer readings over time.
6. Load and Weight Distribution: When the vehicle is loaded with passengers or cargo, the suspension compresses, reducing available clearance. The calculator provides static measurements; dynamic behavior under load can differ.
7. Manufacturing Tolerances: Both wheels and tires are manufactured within certain tolerances. Minor variations in size and shape can occur, meaning that even if a calculator indicates perfect fitment, slight adjustments or checks might be needed during installation.
8. Hub Centricity vs. Lug Centricity: While most modern vehicles are hub-centric (the wheel is centered by a lip on the hub), some rely solely on lug nuts to center the wheel (lug-centric). Incorrect centering can lead to vibrations and stress on the studs. Ensuring the new wheels are compatible with your vehicle’s centering method is important.

Frequently Asked Questions (FAQ)

Q1: How accurate is a wheel dimension calculator?

A: Our calculator provides highly accurate estimations based on standard geometric formulas. However, it doesn’t account for specific tire tread designs, suspension nuances, or manufacturing tolerances. It’s an excellent tool for initial assessment but should be supplemented with vehicle-specific fitment guides and professional advice for critical applications.

Q2: What happens if my speedometer is off after changing tire size?

A: If your speedometer reads slower than your actual speed (due to larger tires), you risk speeding tickets and inaccurate mileage tracking. If it reads faster (due to smaller tires), you might be driving slower than you think, potentially causing traffic flow issues. Many modern vehicles allow for speedometer recalibration via OBD-II scanners or specific programming tools.

Q3: Can I mix different bolt patterns on my car using adapters?

A: While adapters exist to change bolt patterns, they introduce several risks. They add thickness to the hub assembly, potentially push the wheel further outward, and place extra stress on the wheel studs. It’s generally safer to use wheels with a bolt pattern that matches your vehicle’s hub directly. Always ensure adapters are high-quality and installed correctly if used.

Q4: What does a negative offset mean for wheel fitment?

A: A negative offset means the wheel’s mounting surface is positioned inboard (towards the vehicle) relative to the wheel’s centerline. This pushes the wheel and tire assembly further outward from the hub, increasing the track width and potentially bringing the outer edge closer to the fender. A wheel dimension calculator helps quantify this outward movement.

Q5: How much clearance do I need for my tires not to rub?

A: This varies greatly by vehicle and driving conditions. For street use, maintaining at least 5-10mm of clearance between the tire and the nearest suspension component (inner) or fender (outer) is generally recommended. For off-road use, more clearance is desirable. The calculator’s clearance outputs are estimates; visual inspection is key.

Q6: Will changing wheel size affect my car’s handling?

A: Yes. Larger wheels typically require lower-profile tires, which reduce sidewall flex and can improve steering response and cornering grip on smooth surfaces. However, they also increase unsprung weight (negatively impacting suspension response) and can lead to a harsher ride over bumps. The overall diameter change also affects the effective gear ratio.

Q7: Can I use a wheel dimension calculator to determine if larger brakes will fit?

A: Indirectly. While the calculator doesn’t measure brake caliper size, it can show how much space is between the hub and the inner face of the wheel spokes. If you know the dimensions of your new brakes, you can compare them to the calculated spoke clearance. However, precise brake fitment requires measuring the wheel’s inner barrel clearance or consulting brake kit manufacturers.

Q8: What is the ideal offset for my vehicle?

A: The “ideal” offset depends on the desired outcome (flush fitment, concavity, suspension clearance). Manufacturers specify a factory offset range for optimal performance and safety. Aftermarket wheels often push these boundaries. Consult vehicle-specific forums, tuning guides, or use our calculator to see the effect of different offsets compared to your stock setup.

Related Tools and Internal Resources

• Tire Size Calculator

  Explore detailed tire size conversions, sidewall height, and overall diameter calculations.

• Guide to Understanding Wheel Specs

  Deep dive into wheel diameter, width, offset, backspacing, and bolt patterns.

• Speedometer Correction Calculator

  Calculate the necessary adjustment factor for your speedometer after a tire size change.

• Blog: Choosing the Right Aftermarket Wheels

  Tips and considerations for selecting the perfect set of wheels for your vehicle.

• Vehicle Weight Calculator

  Estimate your vehicle’s weight distribution and load capacity.

• Suspension Travel Calculator

  Analyze the relationship between suspension travel and tire clearance.

// Charting library using native Canvas API
var chartInstance = null;

function drawClearanceChart(innerDiff, outerDiff) {
var canvas = document.getElementById(‘clearanceChart’);
var ctx = canvas.getContext(‘2d’);

// Clear previous chart if it exists
if (chartInstance) {
chartInstance.destroy();
}

// Define chart data
var data = {
labels: [‘Inner Clearance Change (mm)’, ‘Outer Clearance Change (mm)’],
datasets: [{
label: ‘Clearance Change’,
data: [innerDiff, outerDiff],
backgroundColor: [
‘rgba(0, 74, 153, 0.6)’, // Primary color for Inner
‘rgba(40, 167, 69, 0.6)’ // Success color for Outer
],
borderColor: [
‘rgba(0, 74, 153, 1)’,
‘rgba(40, 167, 69, 1)’
],
borderWidth: 1
}]
};

// Define chart options
var options = {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: ‘Change in Millimeters (mm)’
}
}
},
plugins: {
title: {
display: true,
text: ‘Impact of Wheel Change on Clearance’
},
tooltip: {
callbacks: {
label: function(context) {
var label = context.dataset.label || ”;
if (label) {
label += ‘: ‘;
}
if (context.parsed.y !== null) {
label += context.parsed.y + ‘ mm’;
}
return label;
}
}
}
}
};

// Create new chart instance
chartInstance = new Chart(ctx, {
type: ‘bar’,
data: data,
options: options
});
}

function isValidNumber(value) {
return !isNaN(parseFloat(value)) && isFinite(value);
}

function validateInput(id, errorId, min, max, message) {
var input = document.getElementById(id);
var errorElement = document.getElementById(errorId);
var value = parseFloat(input.value);
var errors = [];

if (!isValidNumber(value)) {
errors.push(“Please enter a valid number.”);
} else {
if (min !== null && value max) {
errors.push(message || `Value cannot exceed ${max}.`);
}
}

if (errors.length > 0) {
errorElement.textContent = errors.join(‘ ‘);
input.style.borderColor = ‘#dc3545’;
return false;
} else {
errorElement.textContent = ”;
input.style.borderColor = ‘#ced4da’;
return true;
}
}

function calculateWheelDimensions() {
// Clear previous errors
document.getElementById(‘currentDiameterError’).textContent = ”;
document.getElementById(‘currentWidthError’).textContent = ”;
document.getElementById(‘currentTireProfileError’).textContent = ”;
document.getElementById(‘currentOffsetError’).textContent = ”;
document.getElementById(‘newDiameterError’).textContent = ”;
document.getElementById(‘newWidthError’).textContent = ”;
document.getElementById(‘newTireProfileError’).textContent = ”;
document.getElementById(‘newOffsetError’).textContent = ”;

// Get input values
var currentDiameter = parseFloat(document.getElementById(‘currentDiameter’).value);
var currentWidth = parseFloat(document.getElementById(‘currentWidth’).value);
var currentTireProfile = parseFloat(document.getElementById(‘currentTireProfile’).value);
var currentOffset = parseFloat(document.getElementById(‘currentOffset’).value);
var newDiameter = parseFloat(document.getElementById(‘newDiameter’).value);
var newWidth = parseFloat(document.getElementById(‘newWidth’).value);
var newTireProfile = parseFloat(document.getElementById(‘newTireProfile’).value);
var newOffset = parseFloat(document.getElementById(‘newOffset’).value);

// Input Validation
var inputsValid = true;
inputsValid &= validateInput(‘currentDiameter’, ‘currentDiameterError’, 10, null, ‘Wheel diameter must be positive.’);
inputsValid &= validateInput(‘currentWidth’, ‘currentWidthError’, 3, null, ‘Wheel width must be positive.’);
inputsValid &= validateInput(‘currentTireProfile’, ‘currentTireProfileError’, 10, 100, ‘Tire profile must be between 10 and 100.’);
inputsValid &= validateInput(‘currentOffset’, ‘currentOffsetError’, -50, 70);
inputsValid &= validateInput(‘newDiameter’, ‘newDiameterError’, 10, null, ‘Wheel diameter must be positive.’);
inputsValid &= validateInput(‘newWidth’, ‘newWidthError’, 3, null, ‘Wheel width must be positive.’);
inputsValid &= validateInput(‘newTireProfile’, ‘newTireProfileError’, 10, 100, ‘Tire profile must be between 10 and 100.’);
inputsValid &= validateInput(‘newOffset’, ‘newOffsetError’, -50, 70);

if (!inputsValid) {
document.getElementById(‘highlightResult’).innerHTML = “Please correct errors.”;
return;
}

var MM_PER_INCH = 25.4;

// Calculations
var currentTireWidthMM = currentWidth * MM_PER_INCH; // Approximation: Tire width is often close to wheel width, but a better approximation uses the aspect ratio formula with a standard tire width if not given. Assuming tire width is close to wheel width for simplified calc.
var newTireWidthMM = newWidth * MM_PER_INCH; // Approximation

// Calculate current tire sidewall height
var currentSidewallHeightMM = (currentTireWidthMM * currentTireProfile) / 100;
// Calculate new tire sidewall height
var newSidewallHeightMM = (newTireWidthMM * newTireProfile) / 100;

// Calculate overall diameters
var currentOverallDiameterMM = (currentDiameter * MM_PER_INCH) + (2 * currentSidewallHeightMM);
var newOverallDiameterMM = (newDiameter * MM_PER_INCH) + (2 * newSidewallHeightMM);

var currentOverallDiameterIn = currentDiameter + (2 * currentSidewallHeightMM / MM_PER_INCH);
var newOverallDiameterIn = newDiameter + (2 * newSidewallHeightMM / MM_PER_INCH);

// Calculate diameter difference
var diameterDifferenceMM = newOverallDiameterMM – currentOverallDiameterMM;
var diameterDifferenceIn = newOverallDiameterIn – currentOverallDiameterIn;

// Calculate speedometer error
var speedometerError = 0;
if (currentOverallDiameterMM > 0) {
speedometerError = ((newOverallDiameterMM – currentOverallDiameterMM) / currentOverallDiameterMM) * 100;
}

// Calculate clearance changes
// Inner Clearance Change: How much the *inside* of the wheel moves relative to the suspension.
// Positive value means it moves INWARD (more clearance). Negative means OUTWARD (less clearance).
var innerClearanceChange = (currentOffset – newOffset) + ((currentWidth – newWidth) / 2 * MM_PER_INCH);

// Outer Clearance Change: How much the *outside* of the wheel moves relative to the fender.
// Positive value means it moves OUTWARD (closer to fender). Negative means INWARD (further from fender).
var outerClearanceChange = (currentOffset – newOffset) – ((currentWidth – newWidth) / 2 * MM_PER_INCH);

// Display Results
var highlightText = “”;
if (Math.abs(diameterDifferenceIn) 0) {
highlightText = “Larger Overall Diameter”;
} else {
highlightText = “Smaller Overall Diameter”;
}
highlightText += `(${Math.abs(diameterDifferenceIn).toFixed(2)} inches / ${Math.abs(diameterDifferenceMM).toFixed(1)} mm difference)`;

document.getElementById(‘highlightResult’).innerHTML = highlightText;
document.getElementById(‘diameterDifference’).textContent = diameterDifferenceIn.toFixed(2) + ” in / ” + diameterDifferenceMM.toFixed(1) + ” mm”;
document.getElementById(‘speedometerError’).textContent = speedometerError.toFixed(2) + “%”;
document.getElementById(‘tireWidthMM’).textContent = newTireWidthMM.toFixed(0) + ” mm”;
document.getElementById(‘innerClearance’).textContent = innerClearanceChange.toFixed(1) + ” mm”;
document.getElementById(‘outerClearance’).textContent = outerClearanceChange.toFixed(1) + ” mm”;

// Update Table
document.getElementById(‘tableCurrentDia’).textContent = currentDiameter.toFixed(1);
document.getElementById(‘tableNewDia’).textContent = newDiameter.toFixed(1);
document.getElementById(‘tableDiffDia’).textContent = (newDiameter – currentDiameter).toFixed(1);

document.getElementById(‘tableCurrentWidth’).textContent = currentWidth.toFixed(1);
document.getElementById(‘tableNewWidth’).textContent = newWidth.toFixed(1);
document.getElementById(‘tableDiffWidth’).textContent = (newWidth – currentWidth).toFixed(1);

document.getElementById(‘tableCurrentProfile’).textContent = currentTireProfile.toFixed(0);
document.getElementById(‘tableNewProfile’).textContent = newTireProfile.toFixed(0);
document.getElementById(‘tableDiffProfile’).textContent = (newTireProfile – currentTireProfile).toFixed(0);

document.getElementById(‘tableTireWidthMM’).textContent = currentTireWidthMM.toFixed(0);
document.getElementById(‘tableNewTireWidthMM’).textContent = newTireWidthMM.toFixed(0);
document.getElementById(‘tableDiffTireWidthMM’).textContent = (newTireWidthMM – currentTireWidthMM).toFixed(0);

document.getElementById(‘tableSidewallMM’).textContent = currentSidewallHeightMM.toFixed(0);
document.getElementById(‘tableNewSidewallMM’).textContent = newSidewallHeightMM.toFixed(0);
document.getElementById(‘tableDiffSidewallMM’).textContent = (newSidewallHeightMM – currentSidewallHeightMM).toFixed(0);

document.getElementById(‘tableOverallDia’).textContent = currentOverallDiameterIn.toFixed(2);
document.getElementById(‘tableNewOverallDia’).textContent = newOverallDiameterIn.toFixed(2);
document.getElementById(‘tableDiffOverallDia’).textContent = diameterDifferenceIn.toFixed(2);

document.getElementById(‘tableOverallDiaMM’).textContent = currentOverallDiameterMM.toFixed(1);
document.getElementById(‘tableNewOverallDiaMM’).textContent = newOverallDiameterMM.toFixed(1);
document.getElementById(‘tableDiffOverallDiaMM’).textContent = diameterDifferenceMM.toFixed(1);

document.getElementById(‘tableCurrentOffset’).textContent = currentOffset.toFixed(1);
document.getElementById(‘tableNewOffset’).textContent = newOffset.toFixed(1);
document.getElementById(‘tableDiffOffset’).textContent = (newOffset – currentOffset).toFixed(1);

// Recalculate clearance table values based on the *absolute* positions, not just difference.
// Inner position = Offset + (Width/2) -> A more negative number means further inward.
var currentInnerPosMM = (currentOffset + (currentWidth/2 * MM_PER_INCH));
var newInnerPosMM = (newOffset + (newWidth/2 * MM_PER_INCH));
var innerClearanceTable = newInnerPosMM – currentInnerPosMM; // How much the new wheel’s inner edge moves relative to the old. Positive = moves inward.

// Outer position = Offset – (Width/2) -> A more positive number means further outward.
var currentOuterPosMM = (currentOffset – (currentWidth/2 * MM_PER_INCH));
var newOuterPosMM = (newOffset – (newWidth/2 * MM_PER_INCH));
var outerClearanceTable = newOuterPosMM – currentOuterPosMM; // How much the new wheel’s outer edge moves relative to the old. Positive = moves outward.

document.getElementById(‘tableInnerClearance’).textContent = innerClearanceTable.toFixed(1);
document.getElementById(‘tableNewInnerClearance’).textContent = newInnerPosMM.toFixed(1); // Showing absolute position for clarity
document.getElementById(‘tableDiffInnerClearance’).textContent = (newInnerPosMM – currentInnerPosMM).toFixed(1);

document.getElementById(‘tableOuterClearance’).textContent = outerClearanceTable.toFixed(1);
document.getElementById(‘tableNewOuterClearance’).textContent = newOuterPosMM.toFixed(1); // Showing absolute position for clarity
document.getElementById(‘tableDiffOuterClearance’).textContent = (newOuterPosMM – currentOuterPosMM).toFixed(1);

document.getElementById(‘tableSpeedoError’).textContent = speedometerError.toFixed(2) + “%”;
document.getElementById(‘tableNewSpeedoError’).textContent = speedometerError.toFixed(2) + “%”; // Same error value displayed
document.getElementById(‘tableDiffSpeedoError’).textContent = speedometerError.toFixed(2) + “%”; // Difference is the new error itself

// Draw Chart
drawClearanceChart(innerClearanceChange, outerClearanceChange);
}

function resetCalculator() {
document.getElementById(‘currentDiameter’).value = ”;
document.getElementById(‘currentWidth’).value = ”;
document.getElementById(‘currentTireProfile’).value = ”;
document.getElementById(‘currentOffset’).value = ”;
document.getElementById(‘currentBoltPattern’).value = ‘5-114.3’; // Reset to a common default

document.getElementById(‘newDiameter’).value = ”;
document.getElementById(‘newWidth’).value = ”;
document.getElementById(‘newTireProfile’).value = ”;
document.getElementById(‘newOffset’).value = ”;
document.getElementById(‘newBoltPattern’).value = ‘5-114.3’; // Reset to a common default

// Clear errors
var errorElements = document.querySelectorAll(‘.error-message’);
for (var i = 0; i < errorElements.length; i++) {
errorElements[i].textContent = '';
}
// Reset input borders
var inputs = document.querySelectorAll('.input-group input[type="number"], .input-group select');
for (var i = 0; i < inputs.length; i++) {
inputs[i].style.borderColor = '#ced4da';
}

// Reset results
document.getElementById('highlightResult').innerHTML = '–';
document.getElementById('diameterDifference').textContent = '–';
document.getElementById('speedometerError').textContent = '–';
document.getElementById('tireWidthMM').textContent = '–';
document.getElementById('innerClearance').textContent = '–';
document.getElementById('outerClearance').textContent = '–';

// Reset table
var tableCells = document.querySelectorAll('.results-container table td');
for (var i = 0; i < tableCells.length; i++) {
tableCells[i].textContent = '–';
}

// Clear chart
var canvas = document.getElementById('clearanceChart');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (chartInstance) {
chartInstance.destroy();
chartInstance = null;
}
canvas.height = 300; // Reset canvas height
}

function copyResults() {
var highlightResult = document.getElementById('highlightResult').innerText.replace('–', 'N/A');
var diameterDiff = document.getElementById('diameterDifference').innerText.replace('–', 'N/A');
var speedError = document.getElementById('speedometerError').innerText.replace('–', 'N/A');
var tireWidth = document.getElementById('tireWidthMM').innerText.replace('–', 'N/A');
var innerClearance = document.getElementById('innerClearance').innerText.replace('–', 'N/A');
var outerClearance = document.getElementById('outerClearance').innerText.replace('–', 'N/A');

var summary = `Wheel Dimension Fitment Analysis:\n\n`;
summary += `Summary: ${highlightResult}\n`;
summary += `Diameter Difference: ${diameterDiff}\n`;
summary += `Speedometer Error: ${speedError}\n`;
summary += `New Tire Width: ${tireWidth}\n`;
summary += `Inner Clearance Change: ${innerClearance}\n`;
summary += `Outer Clearance Change: ${outerClearance}\n\n`;

summary += "Detailed Table:\n";
var tableRows = document.querySelectorAll('.results-container table tbody tr');
tableRows.forEach(function(row) {
var cells = row.querySelectorAll('td');
if (cells.length === 4) {
summary += `${cells[0].innerText} | Current: ${cells[1].innerText} | New: ${cells[2].innerText} | Diff: ${cells[3].innerText}\n`;
}
});

navigator.clipboard.writeText(summary).then(function() {
// Success feedback (optional)
var btn = document.querySelector('.copy-btn');
var originalText = btn.textContent;
btn.textContent = 'Copied!';
setTimeout(function() {
btn.textContent = originalText;
}, 1500);
}).catch(function(err) {
console.error('Failed to copy results: ', err);
// Error feedback (optional)
});
}

// Initialize chart canvas height for better aspect ratio on mobile
document.addEventListener('DOMContentLoaded', function() {
var canvas = document.getElementById('clearanceChart');
if (canvas) {
canvas.style.height = '300px'; // Default height
canvas.style.width = '100%';
}
});

// Add event listeners for real-time updates if desired (optional, current setup calculates on button click)
// Example:
// var inputs = document.querySelectorAll('.loan-calc-container input, .loan-calc-container select');
// for (var i = 0; i < inputs.length; i++) {
// inputs[i].addEventListener('input', function() {
// // Debounce or throttle if performance is an issue
// calculateWheelDimensions();
// });
// }

// Initialize FAQ toggles
var faqHeaders = document.querySelectorAll('.faq-item strong');
for (var i = 0; i < faqHeaders.length; i++) {
faqHeaders[i].addEventListener('click', function() {
var paragraph = this.nextElementSibling;
if (paragraph.style.display === 'block') {
paragraph.style.display = 'none';
} else {
paragraph.style.display = 'block';
}
});
// Initially hide paragraphs
if(faqHeaders[i].nextElementSibling) {
faqHeaders[i].nextElementSibling.style.display = 'none';
}
}