Custom label values for Y axis in amcharts - amcharts

Question

Can I set Custom label values for Y axis in amcharts js?
example : convert 10,20,30,... y-axis value to 'very low','low','high'

Answer 1

There are two solutions here.
The first solution uses a labelFunction in your valueAxis to specify what label you want given the value being drawn on the chart, i.e
valueAxes: [
{
minimum: 0,
maximum: 50,
strictMinMax: true,
labelFunction: function(value, valueText, valueAxis) {
switch (value) {
case 10:
valueText = "Very Low";
break;
case 20:
valueText = "Low";
break;
case 30:
valueText = "Average";
break;
case 40:
valueText = "Above Average";
break;
case 50:
valueText = "High";
break;
default:
valueText = "";
}
return valueText;
}
}
],
Demo:
var chart = AmCharts.makeChart("chartdiv", {
type: "serial",
theme: "light",
valueAxes: [
{
minimum: 0,
maximum: 50,
strictMinMax: true,
labelFunction: function(value, valueText, valueAxis) {
switch (value) {
case 10:
valueText = "Very Low";
break;
case 20:
valueText = "Low";
break;
case 30:
valueText = "Average";
break;
case 40:
valueText = "Above Average";
break;
case 50:
valueText = "High";
break;
default:
valueText = "";
}
return valueText;
}
}
],
dataProvider: [
{
category: "cat-1",
value: 32
},
{
category: "cat-2",
value: 41
},
{
category: "cat-3",
value: 27
},
{
category: "cat-4",
value: 29
},
{
category: "cat-5",
value: 22
},
{
category: "cat-6",
value: 11
},
{
category: "cat-7",
value: 46
},
{
category: "cat-8",
value: 18
},
{
category: "cat-9",
value: 32
},
{
category: "cat-10",
value: 32
}
],
graphs: [
{
fillAlphas: 0.9,
lineAlpha: 0.2,
type: "column",
valueField: "value"
}
],
categoryField: "category"
});
#chartdiv {
width: 100%;
height: 300px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
Note that this solution is slightly brittle in that you're depending on the value axis to generate the correct scale (increments of 10, for instance) and there isn't a guaranteed way to control that.
The better solution is to use guides instead to draw your axis labels, lines and ticks at the appropriate points on the axis, while disabling the ones generated by the axis to ensure that you get the correct lines:
valueAxes: [
{
minimum: 0,
maximum: 50,
strictMinMax: true,
//disable the axis' labels, gridAlpha and tickLength so you can
//draw them using guides
labelsEnabled: false,
gridAlpha: 0,
tickLength: 0,
guides: [{
value: 10,
tickLength: 5,
lineAlpha: .15,
label: "Very Low"
},{
value: 20,
tickLength: 5,
lineAlpha: .15,
label: "Low"
},{
value: 30,
tickLength: 5,
lineAlpha: .15,
label: "Average"
},{
value: 40,
tickLength: 5,
lineAlpha: .15,
label: "Above Average"
},{
value: 50,
tickLength: 5,
lineAlpha: .15,
label: "High"
}]
}
]
Demo:
var chart = AmCharts.makeChart("chartdiv", {
type: "serial",
theme: "light",
valueAxes: [
{
minimum: 0,
maximum: 50,
strictMinMax: true,
labelsEnabled: false,
gridAlpha: 0,
tickLength: 0,
guides: [{
value: 10,
tickLength: 5,
lineAlpha: .15,
label: "Very Low"
},{
value: 20,
tickLength: 5,
lineAlpha: .15,
label: "Low"
},{
value: 30,
tickLength: 5,
lineAlpha: .15,
label: "Average"
},{
value: 40,
tickLength: 5,
lineAlpha: .15,
label: "Above Average"
},{
value: 50,
tickLength: 5,
lineAlpha: .15,
label: "High"
}]
}
],
dataProvider: [
{
category: "cat-1",
value: 32
},
{
category: "cat-2",
value: 41
},
{
category: "cat-3",
value: 27
},
{
category: "cat-4",
value: 29
},
{
category: "cat-5",
value: 22
},
{
category: "cat-6",
value: 11
},
{
category: "cat-7",
value: 46
},
{
category: "cat-8",
value: 18
},
{
category: "cat-9",
value: 32
},
{
category: "cat-10",
value: 32
}
],
graphs: [
{
fillAlphas: 0.9,
lineAlpha: 0.2,
type: "column",
valueField: "value"
}
],
categoryField: "category"
});
#chartdiv {
width: 100%;
height: 300px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

Answer 2

In v4, you can use adapters to achieve this.

Answer 3

var chart = AmCharts.makeChart("chartdiv", {
type: "serial",
theme: "light",
valueAxes: [
{
minimum: 0,
maximum: 100,
strictMinMax: true,
labelsEnabled: false,
gridAlpha: 0,
tickLength: 0,
guides: [{
value: 10,
tickLength: 2,
lineAlpha: .15,
label: "Very Low"
},{
value: 20,
tickLength: 2,
lineAlpha: .15,
label: "Low"
},{
value: 30,
tickLength: 2,
lineAlpha: .15,
label: "Average"
},{
value: 40,
tickLength:2,
lineAlpha: .15,
label: "Above Average"
},{
value: 50,
tickLength: 2,
lineAlpha: .15,
label: "High"
}]
}
],
dataProvider: [
{
category: "cat-1",
value: 32
},
{
category: "cat-2",
value: 41
},
{
category: "cat-3",
value: 27
},
{
category: "cat-4",
value: 29
},
{
category: "cat-5",
value: 22
},
{
category: "cat-6",
value: 11
},
{
category: "cat-7",
value: 46
},
{
category: "cat-8",
value: 18
},
{
category: "cat-9",
value: 32
},
{
category: "cat-10",
value: 32
}
],
graphs: [
{
fillAlphas: 0.9,
lineAlpha: 0.1,
type: "column",
valueField: "value"
}
],
categoryField: "category"
});
#chartdiv {
width: 100%;
height: 300px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>