Y-Axis label prefix for XY Amcharts - amcharts

Question

I didn't find any solution how to add prefix/suffix for Y-Axis of XYAmChart. Seems like labelFunction are not supported for valueAxes in XY chart type. Any suggestions?
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"theme": "light",
"dataDateFormat": "DD-MM-YYYY",
"graphs": [
{
"id":"g8",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet":"round",
"bulletBorderAlpha":1,
"bulletColor":"#FFFFFF",
"bulletSize":5,
"dashLength":0,
"hideBulletsCount":50,
"lineThickness":2,
"lineColor":"#67b7dc",
"title":"Store 8",
"useLineColorForBulletBorder":true,
"xField":"d-1-c2",
"yField":"p-1-c2",
"xAxis":"g8",
"balloonText":"<span style='font-size:18px;'>[[d-1-c2]]</span><br>07/1/2017-12/31/2017"
},
{
"id":"g8-copy1",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet":"round",
"bulletBorderAlpha":1,
"bulletColor":"#FFFFFF",
"bulletSize":5,
"dashLength":15,
"hideBulletsCount":50,
"lineThickness":2,
"lineColor":"#67b7dc",
"title":"Store 8",
"useLineColorForBulletBorder":true,
"xField":"d-1-c1",
"yField":"p-1-c1",
"xAxis":"g8-copy1",
"balloonText":"<span style='font-size:18px;'>[[d-1-c1]]</span><br>1/1/2017-6/29/2017"
}
],
"valueAxes": [
{
"id": "g8",
"axisAlpha": 1,
"gridAlpha": 1,
"axisColor": "#b0de09",
"color": "#b0de09",
"dashLength": 5,
"centerLabelOnFullp": true,
"position": "bottom",
"type": "date",
"minp": "DD-MM-YYYY",
"markPeriodChange": false,
"labelFunction": function(value, valueText) {
return "prefix:" + valueText;
}
},
{
"id": "g8-copy1",
"gridAlpha": 0,
"axisAlpha": 1,
"centerLabelOnFullp": false,
"position": "bottom",
"offset": 40,
"type": "date",
"minp": "DD-MM-YYYY",
'markPeriodChange': false,
"labelFunction": function(value, valueText) {
return "prefix:" + valueText;
}
}
],
"dataProvider": [
{
"d-1-c2":"01/01/2017",
"p-1-c2":"5684.6400"
},{
"d-1-c2":"01/02/2017",
"p-1-c2":"6468.9600"
},{
"d-1-c2":"01/03/2017",
"p-1-c2":"9032.7600"
},{
"d-1-c2":"01/04/2017",
"p-1-c2":"6385.9200"
},{
"d-1-c2":"01/05/2017",
"p-1-c2":"10087.3900"
},{
"d-1-c2":"01/06/2017",
"p-1-c2":"6136.3300"
},
{
"d-1-c1":"01/07/2017",
"p-1-c1":"4659.7000"
},{
"d-1-c1":"01/08/2017",
"p-1-c1":"9719.7100"
},{
"d-1-c1":"01/09/2017",
"p-1-c1":"4789.7300"
},{
"d-1-c1":"01/10/2017",
"p-1-c1":"7448.3900"
},{
"d-1-c1":"01/11/2017",
"p-1-c1":"6202.7200"
},{
"d-1-c1":"01/12/2017",
"p-1-c1":"9274.0300"
},{
"d-1-c1":"01/01/2018"
},{
"d-1-c2":"01/07/2017"
}
]
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/xy.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

Answer 1

labelFunction is definitely supported as you can see below.
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"labelFunction": function(value, valueText) {
return "prefix:" + valueText;
}
}, {
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left",
"labelFunction": function(value, valueText) {
return "prefix:" + valueText;
}
} ],
Demo:
var chart = AmCharts.makeChart( "chartdiv", {
"type": "xy",
"theme": "light",
"balloon":{
"fixedPosition":true,
},
"dataProvider": [ {
"y": 10,
"x": 14,
"value": 59,
"y2": -5,
"x2": -3,
"value2": 44
}, {
"y": 5,
"x": 3,
"value": 50,
"y2": -15,
"x2": -8,
"value2": 12
}, {
"y": -10,
"x": 8,
"value": 19,
"y2": -4,
"x2": 6,
"value2": 35
}, {
"y": -6,
"x": 5,
"value": 65,
"y2": -5,
"x2": -6,
"value2": 168
}, {
"y": 15,
"x": -4,
"value": 92,
"y2": -10,
"x2": -8,
"value2": 102
}, {
"y": 13,
"x": 1,
"value": 8,
"y2": -2,
"x2": 0,
"value2": 41
}, {
"y": 1,
"x": 6,
"value": 35,
"y2": 0,
"x2": -3,
"value2": 16
} ],
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"labelFunction": function(value, valueText) {
return "prefix:" + valueText;
}
}, {
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left",
"labelFunction": function(value, valueText) {
return "prefix:" + valueText;
}
} ],
"startDuration": 1.5,
"graphs": [ {
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "circle",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value",
"xField": "x",
"yField": "y",
"maxBulletSize": 100
}, {
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "diamond",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value2",
"xField": "x2",
"yField": "y2",
"maxBulletSize": 100
} ]
} );
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/xy.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
You can also use unit and unitPosition if your custom labeling doesn't
require any additional logic that you can leverage through labelFunction.
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"unit": "unit-prefix:",
"unitPosition": "left"
}, {
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left",
"unit": "unit-prefix:",
"unitPosition": "left"
} ],
Demo below.
var chart = AmCharts.makeChart( "chartdiv", {
"type": "xy",
"theme": "light",
"balloon":{
"fixedPosition":true,
},
"dataProvider": [ {
"y": 10,
"x": 14,
"value": 59,
"y2": -5,
"x2": -3,
"value2": 44
}, {
"y": 5,
"x": 3,
"value": 50,
"y2": -15,
"x2": -8,
"value2": 12
}, {
"y": -10,
"x": 8,
"value": 19,
"y2": -4,
"x2": 6,
"value2": 35
}, {
"y": -6,
"x": 5,
"value": 65,
"y2": -5,
"x2": -6,
"value2": 168
}, {
"y": 15,
"x": -4,
"value": 92,
"y2": -10,
"x2": -8,
"value2": 102
}, {
"y": 13,
"x": 1,
"value": 8,
"y2": -2,
"x2": 0,
"value2": 41
}, {
"y": 1,
"x": 6,
"value": 35,
"y2": 0,
"x2": -3,
"value2": 16
} ],
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"unit": "unit-prefix:",
"unitPosition": "left"
}, {
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left",
"unit": "unit-prefix:",
"unitPosition": "left"
} ],
"startDuration": 1.5,
"graphs": [ {
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "circle",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value",
"xField": "x",
"yField": "y",
"maxBulletSize": 100
}, {
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "diamond",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value2",
"xField": "x2",
"yField": "y2",
"maxBulletSize": 100
} ]
} );
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/xy.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>