mm.js - Change Colours Documentation

It’s simple to change the colours of a mm.js chart.

Just call moneymage.setColors()

The defaults are Money Mage colours: steelblue for primary and #ccc for secondary.

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.setColors([], "red", "blue");
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.setColors()

Set the colours used by mm.js

Parameters

Parameter	Type	Description
color set	array	An array of HTML colour strings, currently used by internal charts.
primary color	string	The primary HTML colour, can be a hex colour, or html colour string.
secondary color	string	The secondary HTML colour, can be a hex colour, or html colour string.

Example

    moneymage.setColors([], "red", "blue");
    moneymage.createCompoundInterestChart(1000, 
                                     0.03, 
                                     50, 
                                     12,
                                     "compound-interest-chart");