'Show only first and last xAxis label in Highcharts

I would like to display only the first and the last label on my xAxis. This would give enough of a »frame« for the user. However, I don't succeed in it. I am working with a synchronized chart, which can be found here. Is the second and third »column« of (smaller) graphs, I am targeting at.

I tried to work with »startOnTick« and »endOnTick«, but it won't do it.

    xAxis: {
      crosshair: true,
      events: {
        setExtremes: syncExtremes
      },
      visible: i === 1,
      showFirstlabel: true,
      showLastlabel: true,
      startOnTick: true,
      endOnTick: true,
      labels: {
        step: 500,
        format: '{value}'
      }
    },

What is the correct way to force Highcharts to display only first and last label?

Here is a short fiddle (don't know why the line does not appear; it shows the values with mouseover...).

Thanks for any hints.

highchartslabelaxis


Solution 1:[1]

  • You can use the xAxis.labels.formatter callback to show wanted ticks:

Demo: https://jsfiddle.net/BlackLabel/m2Ln8sdg/

    xAxis: {
    tickAmount: 10,
        labels: {
        formatter() {
        if(this.isFirst || this.isLast) {
            return this.value
        } else {
            return ''
        }
      }
    }
  },

API: https://api.highcharts.com/highcharts/xAxis.labels.formatter

  • If you want to have more control about it (like hide label and tick) you can use the load callback method and proper logic to hide/show ticks:

Demo: https://jsfiddle.net/BlackLabel/fbcdskmv/

  chart: {
    events: {
      load() {
        let chart = this;

        for (let i in chart.xAxis[0].ticks) {
            //hide all
          chart.xAxis[0].ticks[i].label.hide()
          chart.xAxis[0].ticks[i].mark.hide()
                    // show first and last tick
          if (chart.xAxis[0].ticks[i].isFirst || chart.xAxis[0].ticks[i].isLast) {
            chart.xAxis[0].ticks[i].mark.show()
            chart.xAxis[0].ticks[i].label.show()
          }
        }
      }
    }

API: https://api.highcharts.com/highcharts/chart.events.load

Solution 2:[2]

The above answers are good, but i just wanted to show another approach which works just fine.

In my styling i do this;

.highcharts-xaxis-labels > text:not(:first-child):not(:last-child) {
    visibility: hidden !important;
}

Solution 3:[3]

Summing up @luftikus143 and @Sebastian W?dzel comments:

const data = [
    ['Jan 2020', 167],
    ['Feb 2020', 170],
    ['Mar 2020', 172]
];

xAxis: {
  type: 'category',
  tickPositions: [0, data.length - 1]
}

Will output only the first and last labels. @martinethyl's workaround answer might need some extra tweaks specially if you have multiple data points. Suggestions (might not work well with smaller media types):


    xAxis: {
      type: 'category',
      labels: {
        rotation: 0,
        x: 5, // Optional: moves labels along the x-axis
        style: {
          textOverflow: 'none', // Removes ellipsis
          whiteSpace: 'nowrap', // Gets the label text in one line
        },
      },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sebastian W?dzel
Solution 2 martinethyl
Solution 3 Davi Mello

Related Questions