Search code examples
javascripttypescriptamcharts

How to show all labels or reduce label padding on AmCharts4 Category Axis?

I'm building a Pareto chart to show percent and count by category. It is important to be able to see all category labels on the chart. There is currently plenty of space to show more category labels, but the axis isn't showing them.

Is there a way to tell the axis to show all labels, or to reduce the padding/margin on axis labels so that more can be shown?

I am using Typescript in an Angular app.

Current Axis Creation Code:

let categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis .title.text = 'Category';
categoryAxis.dataFields.category = categoryField;
categoryAxis.renderer.fontSize = 12;

Image of issue:

Image of issue

Solution

  • You need to set minGridDistance to a small enough value to make the chart display more/all labels, e.g.

    categoryAxis.renderer.minGridDistance = 20;

    From the documentation

    Actual behavior depends on available space. But it's all governed by a single axis renderer's property: minGridDistance.

    In human language it means this: "Whatever happens DO NOT place two grid lines closer than X pixels. I'm serious, man!".

    Default settings depend on orientation. For example horizontal axis renderers (AxisRendererX) has a default of 120. Vertical axis renderer (AxisRendererY): 40.

    Increasing these numbers will mean likely sparser grid lines and related labels. Decreasing will probably result in denser grid/labels.