AmCharts - Controlling value axis labels - amcharts

Question

I want my y-axis to have labels 0%, 25%, 50%, 75%, 100%
I would have expected a gridCount of 4 or 5 to do it, but it refuses. I've tried labelFrequency set to 25 but that doesn't work either.
window.AmCharts.makeChart('chartdiv', {
'type': 'serial',
'categoryField': 'category',
'dataDateFormat': 'YYYY-MM-DD',
'startDuration': 1,
'theme': 'light',
'categoryAxis': {
'parseDates': true,
'axisThickness': 0,
'color': '#989898',
'gridThickness': 0
},
'graphs': [
{
'fillAlphas': 1,
'type': 'column',
'valueField': 'column-1'
}
],
'valueAxes': [
{
'zeroGridAlpha': -2,
'titleColor': '#989898',
'axisThickness': 0,
'color': '#989898',
'gridThickness': 1,
unit: '%',
autoGridCount: false,
minimum:0,
maximum:100,
gridCount: 5
}
],
'dataProvider': [
{
'category': '2014-03-01',
'column-1': 8
},
{
'category': '2014-03-02',
'column-1': 16
},
{
'category': '2014-03-03',
'column-1': 2
},
{
'category': '2014-03-04',
'column-1': 7
},
{
'category': '2014-03-05',
'column-1': 5
},
{
'category': '2014-03-06',
'column-1': 9
},
{
'category': '2014-03-07',
'column-1': 4
},
{
'category': '2014-03-08',
'column-1': 15
},
{
'category': '2014-03-09',
'column-1': 12
},
{
'category': '2014-03-10',
'column-1': 17
},
{
'category': '2014-03-11',
'column-1': 18
},
{
'category': '2014-03-12',
'column-1': 21
},
{
'category': '2014-03-13',
'column-1': 24
},
{
'category': '2014-03-14',
'column-1': 23
},
{
'category': '2014-03-15',
'column-1': 24
}
]
})

Answer 1

Unfortunately there isn't a way to outright set your own axis divisions through the value axis properties. To workaround this, you can disable the value axis labels and grids and set up your own grid and labels using guides:
'valueAxes': [{
'zeroGridAlpha': -2,
'titleColor': '#989898',
'axisThickness': 0,
'color': '#989898',
'gridThickness': 1,
minimum: 0,
maximum: 100,
gridAlpha: 0,
tickLength: 0,
labelsEnabled: false,
guides: [{
value: 0,
label: "0%",
tickLength: 5,
lineAlpha: .15
}, {
value: 25,
label: "25%",
tickLength: 5,
lineAlpha: .15
}, {
value: 50,
label: "50%",
tickLength: 5,
lineAlpha: .15
}, {
value: 75,
label: "75%",
tickLength: 5,
lineAlpha: .15
}, {
value: 100,
label: "100%",
tickLength: 5,
lineAlpha: .15
},
]
}],
Demo below:
AmCharts.makeChart('chartdiv', {
'type': 'serial',
'categoryField': 'category',
'dataDateFormat': 'YYYY-MM-DD',
'startDuration': 1,
'theme': 'light',
'categoryAxis': {
'parseDates': true,
'axisThickness': 0,
'color': '#989898',
'gridThickness': 0
},
'graphs': [{
'fillAlphas': 1,
'type': 'column',
'valueField': 'column-1'
}],
'valueAxes': [{
'zeroGridAlpha': -2,
'titleColor': '#989898',
'axisThickness': 0,
'color': '#989898',
'gridThickness': 1,
minimum: 0,
maximum: 100,
gridAlpha: 0,
tickLength: 0,
labelsEnabled: false,
guides: [{
value: 0,
label: "0%",
tickLength: 5,
lineAlpha: .15
}, {
value: 25,
label: "25%",
tickLength: 5,
lineAlpha: .15
}, {
value: 50,
label: "50%",
tickLength: 5,
lineAlpha: .15
}, {
value: 75,
label: "75%",
tickLength: 5,
lineAlpha: .15
}, {
value: 100,
label: "100%",
tickLength: 5,
lineAlpha: .15
},
]
}],
'dataProvider': [{
'category': '2014-03-01',
'column-1': 8
},
{
'category': '2014-03-02',
'column-1': 16
},
{
'category': '2014-03-03',
'column-1': 2
},
{
'category': '2014-03-04',
'column-1': 7
},
{
'category': '2014-03-05',
'column-1': 5
},
{
'category': '2014-03-06',
'column-1': 9
},
{
'category': '2014-03-07',
'column-1': 4
},
{
'category': '2014-03-08',
'column-1': 15
},
{
'category': '2014-03-09',
'column-1': 12
},
{
'category': '2014-03-10',
'column-1': 17
},
{
'category': '2014-03-11',
'column-1': 18
},
{
'category': '2014-03-12',
'column-1': 21
},
{
'category': '2014-03-13',
'column-1': 24
},
{
'category': '2014-03-14',
'column-1': 23
},
{
'category': '2014-03-15',
'column-1': 24
}
]
})
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>