mm.js - Compound Interest Chart Documentation

Embed a Compound Interest Chart

mm.js - Compound Interest Chart Documentation

The mm.js Compound Interest Chart plots compounding interest over time, from a Lump Sum, Regular Contributions for a given Interest Rate and Term.

The chart can be used to show the power of Compounding.

The chart can also be used with negative Regular Contributions (i.e. Drawdown) to simulate different drawdown rates.

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="compound-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 = 0;
    var interestRate = 3.0/100.0;
    var monthlyContributions = 100;
    var months = 25 * 12;

    moneymage.createCompoundInterestChart(principal, 
                                     interestRate, 
                                     monthlyContributions, 
                                     months,
                                     "compound-interest-chart");
});
</script>

API

moneymage.createCompoundInterestChart()

Create a Compound Interest Chart, using an initial balance, interest rate, and monthly contributions over N months.

Parameters


Parameter Type Description
initial balance float The starting balance at Month 0
interest rate float The annual interest rate, as a 0 .. 1 percentage. 0.03 = 3% annual interest rate
monthly contributions float The contributions made every month. Can be negative for drawdown
months int The number of months to chart
id string The DOM element ID to add the chart to


Example

    moneymage.createCompoundInterestChart(1000, 
                                     0.03, 
                                     50, 
                                     12,
                                     "compound-interest-chart");

Example Chart - Compounding

A chart showing:

<script>
moneymage.ready(() => {
    var principal = 0;
    var interestRate = 3.0/100.0;
    var monthlyContributions = 500;
    var months = 10 * 12;

    moneymage.createCompoundInterestChart(principal, 
                                     interestRate, 
                                     monthlyContributions, 
                                     months,
                                     "compound-interest-chart-compounding");
});
</script>

Example Chart - Drawdown

A chart showing:

This shows that your funds last beyond including and excluding growth.

<script>
moneymage.ready(() => {
    var firePot = 400000;
    var growthRate = 3.0/100.0;
    var monthlyDrawdown = ((firePot * 0.05) / 12.0) * -1;
    var estimatedRetirementLength = 25 * 12;

    moneymage.createCompoundInterestChart(firePot, 
                                     growthRate, 
                                     monthlyDrawdown, 
                                     estimatedRetirementLength,
                                     "compound-interest-chart-drawdown");    
});
</script>