AmCharts - Controlling value axis labels

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
      }
    ]
  })

xorspark xorspark · Accepted Answer · 2017-10-11T16:24:27

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>

AmCharts - Controlling value axis labels

1 Answers