Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/airgead-investment-calculator/llms.txt

Use this file to discover all available pages before exploring further.

js/lib/charts.js contains two exported functions that use the HTML5 Canvas API to draw data visualizations. Both functions are DPI-aware — they scale the canvas for high-resolution displays using devicePixelRatio — and should be called again whenever the window is resized to keep the chart sharp and correctly sized.

​
Import

import { drawGrowthChart, drawComparisonChart } from '../lib/charts.js';

​
Internal setup() function

A private setup(canvas) function handles DPI scaling before every draw call. It reads the canvas element’s CSS layout size via getBoundingClientRect(), multiplies both dimensions by window.devicePixelRatio, and assigns the results to canvas.width and canvas.height. It then calls ctx.setTransform(dpr, 0, 0, dpr, 0, 0) so that all subsequent drawing commands use CSS pixel coordinates rather than physical pixel coordinates. Neither drawGrowthChart nor drawComparisonChart exposes setup() — it is called internally at the start of each draw.

​
drawGrowthChart(canvas, rows)

Draws the year-by-year growth chart on the Results page. The chart renders two filled area lines side by side so the viewer can compare the trajectory of a balance that includes monthly deposits against one that does not.
​
canvas
HTMLCanvasElement
required
The <canvas> element to draw on. The function is a no-op if this value is falsy.
​
rows
array
required
The array of year row objects returned by calculateCompoundInterest(). Each object must include year, withDeposits, and withoutDeposits. The function is a no-op if the array is empty or falsy.
Returns: void Visual elements rendered:
  • Legend — displayed at the top of the chart. “With monthly deposits” is labelled in dark green; “Without deposits” is labelled in grey.
  • Y-axis — 5 evenly spaced grid lines with abbreviated dollar labels ($k / $m suffixes for readability).
  • X-axis — year labels at every fifth year (Y0, Y5, Y10, …).
  • Area paths — two filled area paths, one per scenario, drawn beneath their respective lines.
import { drawGrowthChart } from '../lib/charts.js';
import { calculateCompoundInterest } from '../lib/calculator.js';

const canvas = document.getElementById('growth-chart');
const rows   = calculateCompoundInterest({
  startingBalance: 5000,
  monthlyDeposit:  200,
  annualRate:      7,
  years:           20
});

// Initial draw
drawGrowthChart(canvas, rows);

// Redraw on resize so the chart stays sharp and correctly sized
window.addEventListener('resize', () => drawGrowthChart(canvas, rows));
The Results page registers a resize listener automatically. If you embed the chart in a custom page, add your own resize handler as shown above.

​
drawComparisonChart(canvas, data)

Draws the stacked bar chart on the Compare page. Each bar represents one saved scenario and is split vertically into two segments: the total principal (grey, bottom) and the earned interest (dark green, top). The total balance is printed above each bar, and the scenario name is printed below it.
​
canvas
HTMLCanvasElement
required
The <canvas> element to draw on. The function is a no-op if this value is falsy.
​
data
array of objects
required
An array of scenario objects to plot. The function is a no-op if the array is empty or falsy. Each object must have the following shape:
​
name
string
The scenario label, printed below the bar on the x-axis.
​
balance
number
The total final balance for the scenario. Printed above the bar.
​
principal
number
The total deposits (starting balance + all monthly deposits). Determines the height of the grey bottom segment.
​
interest
number
The interest earned. Determines the height of the dark-green top segment.
Returns: void Visual elements rendered:
  • Legend — displayed at the top of the chart. “Interest earned” is labelled in dark green; “Total principal” is labelled in grey.
  • Y-axis — 5 evenly spaced grid lines.
  • Stacked bars — one bar per scenario, split into principal (grey, bottom) and interest (dark green, top).
  • Labels — the formatted total balance is printed above each bar; the scenario name is printed below.
import { drawComparisonChart } from '../lib/charts.js';

const canvas = document.getElementById('comparison-chart');

// Data shape used in compare.js
const data = [
  { name: 'Scenario A', balance: 103389, principal: 65000, interest: 38389 },
  { name: 'Scenario B', balance: 166851, principal: 125000, interest: 41851 }
];

drawComparisonChart(canvas, data);

window.addEventListener('resize', () => drawComparisonChart(canvas, data));
Build the data array by reading saved plans with getSavedPlans() from calculator.js and deriving balance, principal, and interest from the last row of each plan’s results array.

Build docs developers (and LLMs) love

Get started for freeTalk to us