amCharts 4 - Has anyone successfully added minor ticks to an axis? - axis

Question

I have a Guage chart that is scaled from 0 to 120. Automatically, major ticks are drawn every 10 points and there are no minor ticks. I would like to add minor ticks that increment by 2. Thus far I have not been able to find a way to do this. Can anyone please provide some guidance or even better a solution?
In amCharts 3, configuring minor ticks is clearly documented. However, in amCharts 4 this feature has disappeared and a more generic method appears to be used. However, I have not found any documentation or demo that helps to solve this simple problem.
If you want to play with code, this demo is a great place to start.
Thanks!!

Answer 1

The below solution works. It requires drawing a second axis and adjusting the scale range and the spacing using minGridDistance. The results from the code below is:
Simple gauge chart based on the below code
I did find that minGridDistance did not behave predictably across all scale ranges. For a range of values from 0 to a maximum range of 120, minGridDistance did not work. However, for a maximum range of 60 (in the example below) and for 500, minGridDistance worked fine. Thus, some experimentation is required.
/**
* minor ticks
*/
var axis = chart.xAxes.push(new am4charts.ValueAxis());
axis.min = 0;
axis.max = 60;
axis.strictMinMax = true;
axis.renderer.radius = am4core.percent(100);
axis.renderer.line.strokeOpacity = 1;
axis.renderer.inside = false;
axis.renderer.labels.template.disabled = true;
axis.renderer.ticks.template.disabled = false;
axis.renderer.ticks.template.strokeOpacity = 1;
axis.renderer.ticks.template.length = 8;
axis.renderer.grid.template.disabled = true;
axis.renderer.minGridDistance = 1;
/**
* major ticks and labels
*/
var axis2 = chart.xAxes.push(new am4charts.ValueAxis());
axis2.min = 0;
axis2.max = 120;
axis2.strictMinMax = true;
axis2.renderer.labels.template.disabled = false;
axis2.renderer.ticks.template.disabled = false;
axis2.renderer.ticks.template.length = 13;
axis2.renderer.ticks.template.strokeOpacity = 1;
axis2.renderer.grid.template.disabled = true;