How to show all categories in Radar chart - amcharts 5

Question

I'm using amcharts in React to create a Radar chart.

My data consist of an array of objects with the structure: { category: 'Something', value: 5 }. It has 12 items.

However, for some reason, amcharts zooms out the chart and only shows 6 categories labels and 6 partitions (although the orange bullets show that there are 12):

I'm following amcharts documentation from here: https://www.amcharts.com/demos/radar-chart/

My code is the following:

        const root = am5.Root.new(`chartdiv-${chartData.id}`);

    // Apply the theme
    root.setThemes([
        am5themes_Animated.new(root)
    ]);

    const chart = root.container.children.push(
        am5radar.RadarChart.new(root, {})
    );

    // Create axes and their renderers
    const xRenderer = am5radar.AxisRendererCircular.new(root, {});
    xRenderer.labels.template.setAll({
        radius: 10,
        textType: 'adjusted',
        fontSize: 12,
    });

    const xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
        maxDeviation:  0.1,
        categoryField: 'category',
        renderer: xRenderer,
        groupData: false,
        minZoomCount:12,
    }));

    const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        min: 1,
        max: 6,
        renderer: am5radar.AxisRendererRadial.new(root, {}),
        opacity: 0
    }));

    // Create series
    const series = chart.series.push(am5radar.RadarLineSeries.new(root, {
        name: 'Series',
        xAxis,
        yAxis,
        valueYField: 'value',
        categoryXField: 'category',
        tooltip: am5.Tooltip.new(root, {
            labelText: '{valueY}'
        }),
        stroke: am5.color('#ef763a'),
    }));

    // Set lines
    series.strokes.template.setAll({
        strokeWidth: 2,
    });

    // Set bullets
    series.bullets.push(() => am5.Bullet.new(root, {
        sprite: am5.Circle.new(root, {
            radius: 5,
            fill: am5.color('#ef763a'),
        })
    }));

What is it that I need to change for it to show all 12 categories?

Answer 1

Label frequency/density is controlled by the minGridDistance setting on the axis renderer. A lower value allows for more labels to appear.

const xRenderer = am5radar.AxisRendererCircular.new(root, {
  minGridDistance: 30
});