Amcharts to display only even numbers in Y-axis

Question

I am trying to have only even numbers from 0 and up on the Y-axis of a amcharts5 Line chart but i cannot figure it out how to.

Example: if the biggest value is 5 my Y-axis should how: 0, 2, 4, 6.

Is it possible to achieve this?

What I'm currently having:

  var yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    min: 0,
    maxPrecision: 0,
    maxDeviation: 0.1,
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

Result:

What I need to achieve:

Answer 1

Have you tried to play with the minGridDistance property referenced here ?

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {
    minGridDistance: 20
  })
}));

Full example:

 am5.ready(function () { var root = am5.Root.new("chartdiv"); var chart = root.container.children.push(am5xy.XYChart.new(root, {})); var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererX.new(root, {}) })); var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, { minGridDistance: 20 // Play with it and see what happens... }) })); var series = chart.series.push(am5xy.LineSeries.new(root, { name: "Series", xAxis: xAxis, yAxis: yAxis, valueXField: "valueX", valueYField: "valueY" })); var data = [], valueX = 0, valueY = 0; for (var i = 0; i < 20; i++) { data.push({ valueX: i, valueY: i }); } series.data.setAll(data); });

 #chartdiv { width: 100%; height: 350px; }

 <script src="https://cdn.amcharts.com/lib/5/index.js"></script> <script src="https://cdn.amcharts.com/lib/5/xy.js"></script> <div id="chartdiv"></div>