Highcharts x 范围系列：难以去除 y 轴上的数字标签

Question

This is a question for anyone with HighchartsJS experience

I'm currently having an issue displaying state data using the Highcharts X-range series charts. Specifically, My problem is that our data that we are using to represent each individual state are both fairly high and non consecutive (768, 769 and 773). To label these individual states I'm using a sparse array and placing my labels at the corresponding indices.

The problem I am trying to solve which is depicted by this jsfiddle: https://jsfiddle.net/sn4d2hvq/10/

let categoryArray = [];
categoryArray[768] = 'one';
categoryArray[769] = 'two';
categoryArray[773] = 'three';


Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Example'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: categoryArray,
    },
    series: [{
        name: 'dataset 1',
        borderColor: 'gray',
        pointWidth: 20,
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 768,
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 769
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 9),
            y: 773
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 769
        }, {
            x: Date.UTC(2014, 11, 10),
            x2: Date.UTC(2014, 11, 23),
            y: 773
        }],
        dataLabels: {
            enabled: true
        }
    }]

});

is that I want to exclude all values (which in this case means all numerical values) on the y-axis such that there are no numbers from zero up until the first index as well as no numbers in between any of the labels (ie. 770, 771,772). Here's an example of the desired view: https://jsfiddle.net/estgbr6j/2/

let categoryArray = ['one', 'two', 'three'];


Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Example'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: categoryArray,
    },
    plotOptions: {
      xrange: {
        colorByPoint: false,
      }
    },
    series: [{
        name: 'dataset 1',
        borderColor: 'gray',
        pointWidth: 20,
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 9),
            y: 2
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 10),
            x2: Date.UTC(2014, 11, 23),
            y: 2
        }],
        dataLabels: {
            enabled: true
        }
    }]

});

The only way I've been able to consistently achieve the desired result (as depicted by the second example) has been to map the values from [768, 769, 773] => [0, 1, 2] and use a dense array to label the newly mapped values. It seems that this workaround shouldn't be necessary but I have yet to find an option in the highcharts API to easily allow for our desired result without mapping the values. It should also be noted that in our actual data set, we are usually displaying multiple series with each series depicted by its own color rather than each category (which I have been able to achieve). I would like to know which API option or options are available to display our desired result. Thank you so much.

highcharts: 9.0.1 highcharts-angular: 2.10.0 angular: 12.0.5 node: 14.18.0

Answer 1

The solution with mapping your data is really good. The intervals must be regular if you want to have equally distributed points.

data: [{
    x: Date.UTC(2014, 10, 21),
    x2: Date.UTC(2014, 11, 2),
    y: 0,
}, {
    x: Date.UTC(2014, 11, 2),
    x2: Date.UTC(2014, 11, 5),
    y: 1
}, {
    x: Date.UTC(2014, 11, 8),
    x2: Date.UTC(2014, 11, 9),
    y: 2
}, {
    x: Date.UTC(2014, 11, 9),
    x2: Date.UTC(2014, 11, 19),
    y: 1
}, {
    x: Date.UTC(2014, 11, 10),
    x2: Date.UTC(2014, 11, 23),
    y: 2
}]

You can use tickPositions property, but labels will not be equally distributed. Example: https://jsfiddle.net/BlackLabel/gbwhk5nx/

---

API Reference: https://api.highcharts.com/highcharts/yAxis.tickPositions

Answer 2

mateusz.b on the official Highcharts forum had a great answer to this. He suggested using a columnrange series instead of an xrange series to present the data.

Check out the post here: https://www.highcharts.com/forum/viewtopic.php?f=9&t=47822