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?
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
});