I am currently working on creating a polar chart to showcase Satellite data.
https://i.sstatic.net/DNUZ1.jpg
However, I am facing a challenge with setting the grid size to be displayed in increments of 45 degrees. Despite trying various amcharts 4 functions, I have been unable to achieve the desired outcome.
The closest workaround I have found involves using steps of 10 degrees with minGridDistance and formatting the label to only display multiples of 30, as multiples of 45 (an odd number) do not work properly.
Below is the code snippet I am currently using:
private configureChart() {
this.series = {};
const chart = this.chart = am4core.create('chartdiv', am4charts.RadarChart);
/* Create axes */
const xAxis = chart.xAxes.push(new am4charts.ValueAxis<am4charts.AxisRendererCircular>());
xAxis.renderer.axisFills.template.disabled = true;
xAxis.renderer.minLabelPosition = 0.01;
// xAxis.renderer.minGridDistance = 10;
// xAxis.formatLabel = (value: number) => {
// if (value % 30 === 0) {
// return value.toString();
// }
// };
xAxis.strictMinMax = true;
xAxis.max = 360;
xAxis.min = 0;
const yAxis = chart.yAxes.push(new am4charts.ValueAxis<am4charts.AxisRendererRadial>());
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;
}