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.

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.

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"
      }
    }]
  }]
}