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");