mm.js - Loan Interest Chart Documentation

The mm.js Loan Interest Chart plots mortgage interest over time, from a Principal and optional Overpayment for a given Interest Rate and Term.

The chart can be used to show the cost of interest for a Mortgage or Personal Loan, and to show the effect of Overpayments.

How to Embed

If you are using WordPress use the HTML editor.

1. Include the required dependencies

Add the following scripts to your page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.3/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js"></script>
<script src="https://www.moneymage.net/mm.min.js"></script>

These are required dependencies for mm.js. They are all minified, compressed, and served via a reliable Content Distribution Network to improve your site speed.

2. Add a containing div to your page or article

Insert a containing div to your page or article where you would like the chart to appear.

Specify an ID that you will use later.

<div id="loan-interest-chart"></div>

The chart will be inserted at this location.

3. Call mm.js to insert the chart

You are now ready to add the chart!

Insert a <script> ... </script> block to the bottom of your page.

Add the following script to your page or article.

The arguments you provide will change the behaviour of the chart.

<script>
moneymage.ready(() => {
    var principal = 130000;
    var interestRate = 2.14/100.0;
    var optionalOverpayment = 100;
    var months = 25 * 12;

    moneymage.createLoanInterestChart(principal, 
                                     interestRate, 
                                     optionalOverpayment, 
                                     months,
                                     "mortgage-interest-chart");
});
</script>

API

moneymage.createLoanInterestChart()

Create a Loan Interest Chart, using an initial principal, interest rate, and optional overpayment over N months.

Parameters

Parameter	Type	Description
initial principal	float	The starting principal of the loan at Month 0
interest rate	float	The annual interest rate, as a 0 .. 1 percentage. 0.03 = 3% annual interest rate
monthly overpayment	float	The monthly overpayments made. Set this to 0 for no overpayments.
months	int	The number of months to chart
id	string	The DOM element ID to add the chart to

Example

    moneymage.createLoanInterestChart(210000, 
                                     0.035, 
                                     100, 
                                     25*12,
                                     "loan-interest-chart");

Example Chart - Large Overpayments

A chart showing:

• £450,000 loan
• £1500/mo overpayments
• Interest rate of 4.1%
• 25 year term

<script>
moneymage.ready(() => {
    var principal = 450000;
    var interestRate = 4.5/100.0;
    var optionalOverpayment = 1500;
    var months = 25 * 12;

    moneymage.createLoanInterestChart(principal, 
                                     interestRate, 
                                     optionalOverpayment, 
                                     months,
                                     "loan-interest-chart-overpayments");
});
</script>

Example Chart - No overpayments

A chart showing:

• £1,300 loan
• £0 overpayments
• Interest rate of 39.5%
• 5 year term

No overpayment line is plotted.

<script>
moneymage.ready(() => {
    var principal = 1300;
    var interestRate = 39.5/100.0;
    var optionalOverpayment = 0;
    var months = 5 * 12;

    moneymage.createLoanInterestChart(principal, 
                                     interestRate, 
                                     optionalOverpayment, 
                                     months,
                                     "loan-interest-chart-no-overpayments");
});
</script>