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.

Open in CodePen

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.

TypeScript

axis.renderer.minGridDistance = 10000;

JavaScript

axis.renderer.minGridDistance = 10000;

JSON

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

That’s it.

Open in CodePen

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.

TypeScript

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

JavaScript

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

JSON

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

Open in CodePen