title: AmCharts 4: grid step
body: <p>I'm making a polar chart to display Satellities.</p>
  
  <p><a href="https://i.stack.imgur.com/DNUZ1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DNUZ1.jpg" alt="enter image description here"></a></p>
  
  <p>But I want the grids size to be displayed in steps of 45 degrees. I tried a lot of amcharts 4 functions, but it doesn't work.</p>
  
  <p>The nearst solution I've got is to use steps of 10 degrees using <code>minGridDistance</code> and format the label to show only multiples of 30, because it will not work with multiples of 45 that is an odd number.</p>
  
  <p>this is my code:</p>
  
  <pre><code>  private configureChart() {
      this.series = {};
  
      const chart = this.chart = am4core.create('chartdiv', am4charts.RadarChart);
  
      /* Create axes */
      const xAxis = chart.xAxes.push(new am4charts.ValueAxis&lt;am4charts.AxisRendererCircular&gt;());
      xAxis.renderer.axisFills.template.disabled = true;
      xAxis.renderer.minLabelPosition = 0.01;
  
      // xAxis.renderer.minGridDistance = 10;
  
      // xAxis.formatLabel = (value: number) =&gt; {
      //   if (value % 30 === 0) {
      //     return value.toString();
      //   }
      // };
  
      xAxis.strictMinMax = true;
      xAxis.max = 360;
      xAxis.min = 0;
  
      const yAxis = chart.yAxes.push(new am4charts.ValueAxis&lt;am4charts.AxisRendererRadial&gt;());
      yAxis.renderer.labels.template.verticalCenter = 'bottom';
      yAxis.renderer.labels.template.horizontalCenter = 'right';
      yAxis.renderer.minLabelPosition = 0.01;
      yAxis.renderer.inversed = true;
      yAxis.strictMinMax = true;
      yAxis.max = 90;
      yAxis.min = 0;
  
      this.createSeries('GPS', 'GP', '#98BD4A');
      this.createSeries('GLN', 'GL', '#DEAE4E');
      this.createSeries('GAL', 'GA', '#6BB4DB');
      this.createSeries('BDS', 'BD', '#B543C1');
  
      /* Add legend */
      chart.legend = new am4charts.Legend();
  
      /* Add cursor */
      chart.cursor = new am4charts.RadarCursor();
    }
  
    private createSeries(title: string, key: string, color: string) {
      const chart = this.chart;
  
      /* Create and configure series */
      const series = chart.series.push(new am4charts.RadarSeries());
      series.fill = am4core.color(color);
      series.dataFields.valueX = 'azimuth';
      series.dataFields.valueY = 'elevation';
      series.sequencedInterpolation = true;
      series.sequencedInterpolationDelay = 10;
      series.strokeOpacity = 0;
      series.name = title;
      series.data = [];
  
      const circleBullet = series.bullets.push(new am4charts.CircleBullet());
      circleBullet.circle.strokeOpacity = 0;
      circleBullet.circle.radius = 8;
      circleBullet.tooltipText = `SAT PRN {prn}
      Azim: {azimuth}º
      Elev: {elevation}º
      Stat: {snr}dBHz`;
  
      this.series[key] = series;
    }
  </code></pre>