Show only first and last labels on Gauge Chart

This quick tutorial will explain how you can limit your Gauge chart axis to showing only its first and last labels.

The problem

Normally, a Gauge chart axis will show a number of intermediate labels.

See the Pen amCharts 4: Gauge chart showing only first and last label by amCharts team (@amcharts) on CodePen.0

But what if we want to show only the first and last one?

Solution #1

There's a trick: set axis renderer's minGridDistance to some large value.

axis.renderer.minGridDistance = 10000;

axis.renderer.minGridDistance = 10000;

{
  // ...
  "series": [{
    // ...
    "renderer": {
      "minGridDistance": 1000
    }
  }]
}

That's it.

See the Pen amCharts 4: Gauge chart showing only first and last label by amCharts team (@amcharts) on CodePen.0

Solution #2

There is another solution: disabling axis own labels and adding axis ranges for first ant last value.

The theory behind it is explain in "Using axis ranges to place labels at arbitrary values or dates". Let's just adapt it for Gauge chart.

axis.renderer.grid.template.disabled = true;
axis.renderer.labels.template.disabled = true;

let rangeMin = axis.axisRanges.create();
rangeMin.value = axis.min;
rangeMin.label.text = "" + axis.min; // converting to string

let rangeMax = axis.axisRanges.create();
rangeMax.value = axis.max;
rangeMax.label.text = "" + axis.max; // converting to string

axis.renderer.grid.template.disabled = true;
axis.renderer.labels.template.disabled = true;

var rangeMin = axis.axisRanges.create();
rangeMin.value = axis.min;
rangeMin.label.text = "" + axis.min; // converting to string

var rangeMax = axis.axisRanges.create();
rangeMax.value = axis.max;
rangeMax.label.text = "" + axis.max; // converting to string

{
  // ...
  "series": [{
    // ...
    "renderer": {
      "grid": {
        "disabled": true
      },
      "labels": {
        "disabled": true
      }
    },
    "axisRanges": [{
      "value": 0,
      "label": {
        "text": "0"
      }
    }, {
      "value": 100,
      "label": {
        "text": "100"
      }
    }]
  }]
}

See the Pen amCharts 4: Gauge chart showing only first and last label (using axis ranges) by amCharts team (@amcharts) on CodePen.24419