Data Visualisation
Charts Developer Notes
Information
This versatile Charts are based on the Highcharts library.
Please refer to the follow documentation for more customizations: https://www.highcharts.com
Risk Profile Graph - Stacked Bar Graph
Visual Example
This stacked bar graph provides a visual representation of the allocation between “Growth Assets”, “Either Growth or Defensive Assets” and “Defensive Assets” for each type of Risk Profile.
Code Usage (HTML)
Javascript
Highcharts.chart('highcharts-stacked-bar-container-1', {
chart: {
type: 'bar',
height:250,
marginLeft:0,
},
title: {
text: 'Stacked bar chart'
},
credits:{
enabled:false
},
exporting:{
enabled:false
},
xAxis: {
visible:false,
categories: ['Risk Profile']
},
yAxis: {
width:"105%",
visible:false,
// max:11,
title: {enabled:false,
text: 'Total Assets'
}
},
legend: {
reversed: true,
itemStyle: {
lineHeight: '16px',
fontSize: '14px',
}
},
tooltip: {
pointFormat: '{series.name}: {point.y}%',
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
inside: true,
pointFormat: '{point.y}%',
style: {
fontWeight: 'normal',
fontSize:'16px',
textOutline: false
}
}
}
},
series: [{
name: 'Defensive Assets',
color: '#932077',
data: [15]
}, {
name: 'Defensive & Growth Assets',
color: '#D56230',
data: [25]
}, {
name: 'Growth Assets',
color: '#9FDD79',
data: [60]
}
]
});
Digital Account Summary Graph - Column Graph
Visual Example
This column graph provides a visual representation of a members account summary, showing their starting balance, incoming, investment returns, outgoing, and current balance. The graph will default display the data for the current financial year, and will dynamically update as different date periods are selected.
Code Usage (HTML)
Javascript
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
Highcharts.chart('highcharts-column-graph-container-1', {
chart: {
type: 'waterfall',
borderWidth: 1,
borderColor: '#000000',
marginBottom: 50,
marginTop: -20,
height:350
},
title: {
text: ''
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
type: 'category',
labels: {
autoRotation: [0,-180],
style: {
fontSize: '14px',
//whiteSpace: "nowrap",
textOverflow: 'none',
}
}
},
yAxis: {
visible: false,
title: {
enabled: false,
text: ''
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '${point.y:,.0f}',
},
plotOptions: {
series: {
borderRadius: 5,
borderWidth: 0,
},
},
series: [{
data: [{
name: 'Starting balance',
color: '#005C96',
label: '12k',
y: 120000,
}, {
name: 'Incoming',
color: '#932077',
label: '23k',
y: 23000,
}, {
name: 'Investment returns',
color: '#00A8C8',
label: '18k',
y: 18000,
}, {
name: 'Outgoing',
color: '#9FDD79',
label: '7k',
y: -7000,
}, {
name: 'Current balance',
color: '#005C96',
isSum: true,
}],
dataLabels: {
enabled: true,
verticalAlign: 'top',
y: -25,
style: {
fontWeight: 'bold',
fontSize: '16px',
textOutline: false
},
formatter: function() {
if (this.y > 1000000 || this.y < -1000000) {
return "$"+ Highcharts.numberFormat( this.point.y/1000000, 1) + "m";
} else if (this.y > 1000 || this.y < -1000) {
return "$"+ Highcharts.numberFormat( this.point.y/1000, 0) + "k";
} else {
return "$"+ Highcharts.numberFormat( this.point.y) + "";
}
}
},
pointPadding: 0
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
xAxis: {
type: 'category',
labels: {
autoRotation: [0,-180],
style: {
fontSize: '12px',
textOverflow: 'none',
}
}
}
}
}]
}
});
Investment Allocation Graph - Donut Graph
Visual Example
This donut graph provides a visual representation of a members investment allocation across different funds. The graph will default display the data for the current financial year, and will dynamically update as different date periods are selected.
Hoverstate on desktop and downstate on tablet/mobile, on the fund hyperlinks, is indicated by the text changing colour.
Code Usage (HTML)
Javascript
Highcharts.chart('highcharts-donut-graph-container-1', {
chart: {
type: 'variablepie',
style:{
fontWeight: 'normal'
}
},
colors: [
"#8BDAE4",
"#203861",
"#9FDD79",
"#034424",
"#F4D481",
"#643600",
"#530005",
ac "#FEA9A2",
"#810008",
"#932077",
"#BC2726",
"#560054",
"#BBEEF9",
"#A6E2EF",
"#00A8C8",
"#F7B509",
"#F26A5F",
"#6BAF41",
"#C30A96",
"#CE565D"
],posit
credits:{
enabled:false
},
exporting:{
enabled:false
},
title: {
text: 'Donut Graph'
},
tooltip: {
headerFormat: '',
pointFormat: '\u25CF {point.name}',
style: { pointerEvents: 'auto' },
},
series: [{
dataLabels: {
enabled: false,
style:{
display:'none',
fontWeight: 'normal',
fontSize:"14px"
}
},
minPointSize: 60,
innerSize: '50%',
// zMin: 2,
name: 'Investments',
data: [{
name: 'Mercer SmartPath - Born 1959-1963
$18,480 (12%)
2524.15 units',
//color:'#CB09CD',
URL:'https://www.google.com',
x: '12%',
y: 18480,
z:'2524.15 units'
}, {
name: 'Mercer Diversified Shares
$15,400 (10%)
2400.24 units',
//color:'#CB09CD',
URL:'https://www.google.com',
y: 15400,
}, {
name: 'Mercer High Growth
$4,620 (3%)
1033.05 units',
//color:'#CB09CD',
URL:'https://www.google.com',
y: 4620,
}, {
name: 'Mercer Select Growth
$3,080 (2%)
1000.25 units',
//color:'#CB09CD',
URL:'https://www.google.com',
y: 3080,
}, {
name: 'Mercer Moderate Growth
$3,080 (2%)
1000.25 units',
//color:'#CB09CD',
URL:'https://www.google.com',
y: 3080,
}, {
name: 'Mercer Conservative Growth
$15,400 (10%)
2300.67 units',
//color:'#CB09CD',
URL:'https://www.google.com',
y: 15400,
}, {
name: 'Mercer Cash
$12,320 (8%)
2524.15 units',
//color:'#CB09CD',
URL:'https://www.google.com',
y: 12320,
}, {
name: 'Mercer Sustainable Plus Australian Shares
$7,700 (5%)
2400.24 units',
//color:'#CB09CD',
URL:'https://www.google.com',
y: 7700,
}, {
name: 'Mercer Sustainable Plus Global Shares
$4,620 (3%)
1033.05 units',
//color:'#CB09CD',
URL:'https://www.google.com',
y: 4620,
}, {
name: 'Mercer Sustainable Plus High Growth
$3,080 (2%)
1000.25 units',
//color:'#CB09CD',
URL:'https://www.google.com',
y: 3080,
}, {
name: 'Mercer Sustainable Plus Moderate Growth
$4,620 (2%)
1000.25 units',
//color:'#CB09CD',
URL:'https://www.google.com',
y: 4620,
}, {
name: 'Mercer Australian Shares
$3,080 (2%)
2300.67 units',
//color:'#CB09CD',
URL:'https://www.google.com',
y: 3080,
}, {
name: 'Mercer International Shares - Hedged
$6,160 (4%)
2524.15 units',
//color:'#CB09CD',
URL:'https://www.google.com',
y: 6160,
}, {
name: 'Mercer Property
$1,540 (1%)
2400.24 units',
//color:'#CB09CD',
URL:'https://www.google.com',
y: 1540,
}, {
name: 'Mercer Fixed Interest
$7,700 (5%)
1033.05 units',
//color:'#CB09CD',
URL:'https://www.google.com',
y: 7700,
}, {
name: 'Mercer Passive International Shares
$4,620 (3%)
1000.25 units',
//color:'#CB09CD',
URL:'https://www.google.com',
y: 4620,
}, {
name: 'Mercer Passive Australian Listed Property
$7,700 (5%)
1000.25 units',
//color:'#CB09CD',
URL:'https://www.google.com',
y: 7700,
}, {
name: 'Mercer Enhanced Passive Growth
$10,780 (7%)
2300.67 units',
//color:'#CB09CD',
URL:'https://www.google.com',
y: 10780,
},{
name: 'Mercer Enhanced Passive Conservative Growth
$7,700 (5%)
1000.25 units',
// color:'#00A8C8',
URL:'https://www.google.com',
y: 7700,
}, {
name: 'Mercer Direct
$12,320 (8%)
2300.67 units',
// color:'#0066CC',
URL:'https://www.google.com',
y: 12320
}]
}]
});
Investment Performance Graph - Line/Area Graph
Visual Example
This line/area graph provides a visual representation of a members investment performance over a period of time, showing the relationship between their net deposits, their returns and their account balance. The graph will default display the data for the current financial year, and will dynamically update as different date periods are selected. The vertical axis line is moveable by the user, by finger on mobile/ tablet and with the mouse on desktop, and allows the user to see more specific information about certain points on the graph.
Code Usage (HTML)
Javascript
Highcharts.chart('highcharts-line-graph-container-2', {
chart: {
events: {
load: function() {
var chart = this,
yAxis = chart.yAxis[0],
yExtremes = yAxis.getExtremes(),
newMin = yExtremes.dataMin,
newMax = yExtremes.dataMax;
yAxis.setExtremes(newMin, newMax, true, false);
}
},
type: 'area',
style:{
fontWeight: 'normal'
}
},
credits:{
enabled:false
},
exporting:{
enabled:false
},
accessibility: {
description: ''
},
title: {
text: 'Line/Area Graph - Positive Returns'
},
subtitle: {
text: ''
},
xAxis: {
categories: ["01 Jul '21","02 Jul '21","03 Jul '21","04 Jul '21","05 Jul '21","06 Jul '21","07 Jul '21","08 Jul '21","09 Jul '21","10 Jul '21","11 Jul '21","12 Jul '21","13 Jul '21","14 Jul '21","15 Jul '21","16 Jul '21","17 Jul '21","18 Jul '21","19 Jul '21","20 Jul '21","21 Jul '21","22 Jul '21","23 Jul '21","24 Jul '21","25 Jul '21","26 Jul '21","27 Jul '21","28 Jul '21","29 Jul '21","30 Jul '21","31 Jul '21","01 Aug '21","02 Aug '21","03 Aug '21","04 Aug '21","05 Aug '21","06 Aug '21","07 Aug '21","08 Aug '21","09 Aug '21","10 Aug '21","11 Aug '21","12 Aug '21","13 Aug '21","14 Aug '21","15 Aug '21","16 Aug '21","17 Aug '21","18 Aug '21","19 Aug '21","20 Aug '21","21 Aug '21","22 Aug '21","23 Aug '21","24 Aug '21","25 Aug '21","26 Aug '21","27 Aug '21","28 Aug '21","29 Aug '21","30 Aug '21","31 Aug '21","01 Sep '21","02 Sep '21","03 Sep '21","04 Sep '21","05 Sep '21","06 Sep '21","07 Sep '21","08 Sep '21","09 Sep '21","10 Sep '21","11 Sep '21","12 Sep '21","13 Sep '21","14 Sep '21","15 Sep '21","16 Sep '21","17 Sep '21","18 Sep '21","19 Sep '21","20 Sep '21","21 Sep '21","22 Sep '21","23 Sep '21","24 Sep '21","25 Sep '21","26 Sep '21","27 Sep '21","28 Sep '21","29 Sep '21","30 Sep '21","01 Oct '21","02 Oct '21","03 Oct '21","04 Oct '21","05 Oct '21","06 Oct '21","07 Oct '21","08 Oct '21","09 Oct '21","10 Oct '21","11 Oct '21","12 Oct '21","13 Oct '21","14 Oct '21","15 Oct '21","16 Oct '21","17 Oct '21","18 Oct '21","19 Oct '21","20 Oct '21","21 Oct '21","22 Oct '21","23 Oct '21","24 Oct '21","25 Oct '21","26 Oct '21","27 Oct '21","28 Oct '21","29 Oct '21","30 Oct '21","31 Oct '21","01 Nov '21","02 Nov '21","03 Nov '21","04 Nov '21","05 Nov '21","06 Nov '21","07 Nov '21","08 Nov '21","09 Nov '21","10 Nov '21","11 Nov '21","12 Nov '21","13 Nov '21","14 Nov '21","15 Nov '21","16 Nov '21","17 Nov '21","18 Nov '21","19 Nov '21","20 Nov '21","21 Nov '21","22 Nov '21","23 Nov '21","24 Nov '21","25 Nov '21","26 Nov '21","27 Nov '21","28 Nov '21","29 Nov '21","30 Nov '21","01 Dec '21","02 Dec '21","03 Dec '21","04 Dec '21","05 Dec '21","06 Dec '21","07 Dec '21","08 Dec '21","09 Dec '21","10 Dec '21","11 Dec '21","12 Dec '21","13 Dec '21","14 Dec '21","15 Dec '21","16 Dec '21","17 Dec '21","18 Dec '21","19 Dec '21","20 Dec '21","21 Dec '21","22 Dec '21","23 Dec '21","24 Dec '21","25 Dec '21","26 Dec '21","27 Dec '21","28 Dec '21","29 Dec '21","30 Dec '21","31 Dec '21"],
title: {
text: null
},
crosshair: {
width: 1,
color: '#ccc'
},
tickmarkPlacement: 'off',
allowDecimals: false,
labels: {
rotation:360,
formatter: function () {
if (this.isFirst) {
return "01 Jul '21 ";
}
else if (this.isLast) {
return "31 Dec '21 ";
}
},
},
accessibility: {
rangeDescription: 'Range: 1/7/2021 to 6/7/2021.'
}
},
yAxis: {
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
legend: {
reversed: true,
},
tooltip: {
pointFormat: '{series.name}: ${point.y:,.0f}
',
//split: true,
shared: true
},
plotOptions: {
area: {
//stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [ {
name: 'Account Balance',
lineColor: '#002C77',
lineWidth: 2,
color:'#ffffff',
legendColor: '#002C77',
zIndex: 0,
//stacking: 'normal',
data: [102000,102102,102204,102306,102408,102510,102612,102714,102816,102918,103020,103122,103224,103326,103428,103530,103632,106785,106890,106995,103020,103121,103222,103323,103424,106600,112860,112970,104856,104958,105060,105162,105264,105366,105468,104535,104636,105774,105876,105978,110240,105141,105242,105343,105444,106590,106692,107841,107944,109096,109200,108253,108356,107406,107508,110775,106656,106757,107916,108018,108120,108222,108324,108426,108528,108630,108732,108834,108936,109038,109140,109242,109344,109446,109548,109650,109752,118470,118580,113295,113400,113505,113610,113715,113820,108500,108600,108700,108800,108900,109000,109100,109200,109300,109400,109500,109600,109700,110898,110999,111100,111201,111302,111403,111504,111605,111706,111807,111908,112009,112110,112211,112312,112413,112514,112615,112716,112817,112918,113019,113120,113221,113322,113423,113524,113625,113726,113827,113928,114029,114130,114231,114332,114433,114534,114635,114736,114837,114938,115039,115140,115241,115342,115443,115544,115645,115746,115847,115948,116049,116150,116251,116352,116453,116554,116655,116756,116857,116958,117059,117160,117261,117362,117463,117564,117665,117766,117867,117968,118069,118170,118271,118372,118473,118574,118675,118776,118877,118978,119079,119180,119281,119382,119483]
},
{
name: 'Return',
lineColor: 'transparent',
color:'#45B222',
legendColor: '#45B222',
zIndex: 2,
stacking: 'normal',
data: [2000,2002,2004,2006,2008,2010,2012,2014,2016,2018,2020,2022,2024,2026,2028,2030,2032,5085,5090,5095,1020,1021,1022,1023,1024,4100,10260,10270,2056,2058,2060,2062,2064,2066,2068,1035,1036,2074,2076,2078,6240,1041,1042,1043,1044,2090,2092,3141,3144,4196,4200,3153,3156,2106,2108,5275,1056,1057,2116,2118,2120,2122,2124,2126,2128,2130,2132,2134,2136,2138,2140,2142,2144,2146,2148,2150,2152,10770,10780,5395,5400,5405,5410,5415,5420,0,0,0,0,0,0,0,0,0,0,0,0,0,1098,1099,1100,1101,1102,1103,1104,1105,1106,1107,1108,1109,1110,1111,1112,1113,1114,1115,1116,1117,1118,1119,1120,1121,1122,1123,1124,1125,1126,1127,1128,1129,1130,1131,1132,1133,1134,1135,1136,1137,1138,1139,1140,1141,1142,1143,1144,1145,1146,1147,1148,1149,1150,1151,1152,1153,1154,1155,1156,1157,1158,1159,1160,1161,1162,1163,1164,1165,1166,1167,1168,1169,1170,1171,1172,1173,1174,1175,1176,1177,1178,1179,1180,1181,1182,1183]
},{
name: 'Net deposit',
lineColor: 'transparent',
color:'#A5D4E5',
legendColor: '#A5D4E5',
zIndex: 1,
stacking: 'normal',
data: [100000,100100,100200,100300,100400,100500,100600,100700,100800,100900,101000,101100,101200,101300,101400,101500,101600,101700,101800,101900,102000,102100,102200,102300,102400,102500,102600,102700,102800,102900,103000,103100,103200,103300,103400,103500,103600,103700,103800,103900,104000,104100,104200,104300,104400,104500,104600,104700,104800,104900,105000,105100,105200,105300,105400,105500,105600,105700,105800,105900,106000,106100,106200,106300,106400,106500,106600,106700,106800,106900,107000,107100,107200,107300,107400,107500,107600,107700,107800,107900,108000,108100,108200,108300,108400,108500,108600,108700,108800,108900,109000,109100,109200,109300,109400,109500,109600,109700,109800,109900,110000,110100,110200,110300,110400,110500,110600,110700,110800,110900,111000,111100,111200,111300,111400,111500,111600,111700,111800,111900,112000,112100,112200,112300,112400,112500,112600,112700,112800,112900,113000,113100,113200,113300,113400,113500,113600,113700,113800,113900,114000,114100,114200,114300,114400,114500,114600,114700,114800,114900,115000,115100,115200,115300,115400,115500,115600,115700,115800,115900,116000,116100,116200,116300,116400,116500,116600,116700,116800,116900,117000,117100,117200,117300,117400,117500,117600,117700,117800,117900,118000,118100,118200,118300]
}]
});
Investment Returns Graph - Bar graph
Visual Example
This bar graph provides a visual representation of a members investment returns from the different funds they are invested in. The graph will default display the data for the current financial year, and will dynamically update as different date periods are selected. Hoverstate on desktop and downstate on tablet/mobile, on the fund hyperlinks, is indicated by the text changing colour.
Code Usage (HTML)
Javascript
Highcharts.chart('highcharts-bar-graph-container-1', {
chart: {
type: 'bar',
},
credits:{
enabled:false
},
exporting:{
enabled:false
},
title: {
text: 'Investment Returns Graph - Bar graph'
},
xAxis: {
categories: ['Investment Returns Graph'],
visible:false
},
yAxis: {
visible:false,
min: 0,
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
series: {
borderRadius:5,
borderWidth:0,
dataLabels: {
enabled: true,
inside: true
},
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.options.key;
}
}
}
}
},
tooltip: {
pointFormat: '${point.y} ',
enabled:false
},
series: [{
dataLabels: [{
align: 'left',
//format: '({point.percentage})',
pointFormat: '(0%)',
y: 40,
style: {
fontWeight: 'normal',
fontSize:'14px',
textOutline: false,
}
}, {
align: 'left',
format: '{y} points',
y: -40,
pointFormat: '{point.name} ${point.y} ({point.percentage}%)',
style: {
fontWeight: 'normal',
fontSize:'16px',
textOutline: false,
}
}],
data: [{
y: 1287,
key:'https://www.google.com/',
name: 'Mercer High Growth',
percentage: 13,
color:'#00A8C8',
dataLabels: {
color: '#00A8C8',
},
}, {
y: 1691,
key:'https://www.google.com/',
name: 'Mercer Sustainable Plus Conservative',
percentage: 16,
color:'#CB09CD',
dataLabels: {
color: '#CB09CD'
}
}, {
y: 698,
key:'https://www.google.com/',
name: 'Mercer Passive International Shares',
percentage: 19,
color:'#0066CC',
dataLabels: {
color: '#0066CC'
}
}],
showInLegend: false
}],
});
Code Usage (HTML)
Javascript
Highcharts.chart('highcharts-bar-graph-container-2', {
chart: {
type: 'bar',
},
credits:{
enabled:false
},
exporting:{
enabled:false
},
title: {
text: 'Investment Returns Graph - Bar graph - Version 2'
},
xAxis: {
categories: ['Investment Returns Graph'],
visible:false
},
yAxis: {
visible:false,
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
series: {
borderRadius:5,
borderWidth:0,
dataLabels: {
enabled: true,
inside: true
},
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.options.key;
}
}
}
}
},
tooltip: {
pointFormat: '${point.y} ',
enabled:false
},
series: [{
dataLabels: [{
align: 'left',
//format: '({point.percentage})',
pointFormat: '(0%)',
y: 40,
x:-15,
style: {
fontWeight: 'normal',
fontSize:'14px',
textOutline: false,
}
}, {
align: 'left',
format: '{y} points',
y: -40,
pointFormat: '{point.name} ${point.y} ({point.percentage}%)',
style: {
fontWeight: 'normal',
fontSize:'16px',
textOutline: false,
}
}],
data: [{
y: -389,
key:'https://www.google.com/',
name: 'Mercer High Growth',
percentage: -4,
color:'#00A8C8',
dataLabels: [{
align: 'right',
x:15,
}, {
}],
}, {
y: 1691,
key:'https://www.google.com/',
name: 'Mercer Sustainable Plus Conservative',
percentage: 16,
color:'#CB09CD',
dataLabels: [{
}, { x:-126,
}],
}, {
y: 581,
key:'https://www.google.com/',
name: 'Mercer Passive International Shares',
percentage: 6,
color:'#0066CC',
dataLabels: [{
}, { x:-126,
}],
}],
showInLegend: false
}],
});