mm.js - Credit Card Interest Chart Documentation

Embed a Credit Card Interest Chart

mm.js - Credit Card Interest Chart Documentation

The mm.js Credit Card Interest Chart plots credit card balance over time, from a Credit Card Balance, Minimum Payment % or Fixed Minimum Payment, and an optional Regular Overpayment for a given Interest Rate and Term

The chart can be used to show the danger of Credit Card interest and only making Minimum Payments.

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="creditcard-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 creditCardBalance = 3000;
    var interestRate = 19.5/100.0;
    var minimumMonthlyRepaymentPercent = 1/100.0;
    var minimumMonthlyRepaymentFixed = 15.0;
    var optionalMonthlyRepaymentOverAndAboveMinimum = 100;
    var months = 25 * 12;

    moneymage.createCreditCardInterestChart(creditCardBalance, 
                                     interestRate, 
                                     minimumMonthlyRepaymentPercent,
                                     minimumMonthlyRepaymentFixed,
                                     optionalMonthlyRepaymentOverAndAboveMinimum, 
                                     months,
                                     "creditcard-interest-chart");
});
</script>

API

moneymage.createCreditCardInterestChart()

Create a Credit Card Interest Chart, using an initial balance, interest rate, minimum monthly repayments, and optional monthly overpayments over N months.

Please note the minumum monthly payment will be the greater of balance * monthly repayment percent or monthly repayment fixed. This is standard for most cards.

Parameters


Parameter Type Description
initial balance float The starting balance on the card at Month 0
interest rate float The annual interest rate, as a 0 .. 1 percentage. 0.195 = 19.5% annual interest rate
monthly repayment percent float The cards’ required minimum monthly repayments, 0 .. 1 percentage.
monthly repayment fixed float The minimum amount to pay if monthly repayment percent is lower than this value. This can be set to 0.0 if it is not a feature of the card.
optional monthly overpayment float The optional amout to overpay above the monthly minimum.
months int The number of months to chart
id string The DOM element ID to add the chart to


Example

    moneymage.createCreditCardInterestChart(3000, 
                                     0.195, 
                                     0.01,
                                     0.0,
                                     0.0, 
                                     25 * 12,
                                     "creditcard-interest-chart");

Example Chart - No Overpayments

A chart showing:

<script>
moneymage.ready(() => {
    var creditCardBalance = 600;
    var interestRate = 39.4/100.0;
    var minimumMonthlyRepaymentPercent = 1/100.0;
    var minimumMonthlyRepaymentFixed = 30.0;
    var optionalMonthlyRepaymentOverAndAboveMinimum = 0;
    var months = 25 * 12;

    moneymage.createCreditCardInterestChart(creditCardBalance, 
                                     interestRate, 
                                     minimumMonthlyRepaymentPercent,
                                     minimumMonthlyRepaymentFixed,
                                     optionalMonthlyRepaymentOverAndAboveMinimum, 
                                     months,
                                     "creditcard-interest-chart-nooverpayment");
});
</script>

Example Chart - Overpayments

A chart showing:

This chart demonstrates you’ll never clear the balance with making only minimum payments. And the difference with making just a £50/mo overpayment.

<script>
moneymage.ready(() => {
    var creditCardBalance = 3500;
    var interestRate = 19.7/100.0;
    var minimumMonthlyRepaymentPercent = 1/100.0;
    var minimumMonthlyRepaymentFixed = 50.0;
    var optionalMonthlyRepaymentOverAndAboveMinimum = 50;
    var months = 25 * 12;

    moneymage.createCreditCardInterestChart(creditCardBalance, 
                                     interestRate, 
                                     minimumMonthlyRepaymentPercent,
                                     minimumMonthlyRepaymentFixed,
                                     optionalMonthlyRepaymentOverAndAboveMinimum, 
                                     months,
                                     "creditcard-interest-chart-overpayments");
});
</script>