Grouping x axis labels for histogram in high charts

0
votes

Need to merge the x axis labels for histogram in highcharts. The first two bars should have a label of (Group 1), the third bar should have a label (Group 2) and the last two bars will have Group 3 as the label.

step is the only thing I found from the documentation but its doesn't fit my requirement. If anyone has ideas please let me know. 

labels: {
            step: 2
        }

https://jsfiddle.net/wacuk528/

1
javascripthighcharts

1 Answers

1
votes

To achieve it you need to position those ticks by using the tickPositions feature and next set wanted value to display by label by using the labels.formatter feature.

Code: 

  xAxis: {
    tickPositions: [0.5, 2, 3.5],
    crosshair: true,
    labels: {
      formatter() {
        let value = Math.floor(this.value);

        if(!value) {
            value = 1
        }
        return 'group ' + value
      }
    }
  },

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

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

API: https://api.highcharts.com/highcharts/xAxis.tickPositions