Highcharts x-range series. Как обрезать метку внутри данных?

Question

Я хочу обрезать метку внутри поля данных на диаграмме x-range, когда она переполняется. Как я могу это сделать?

Код пункта:

{
    x: Date.UTC(2014, 11, 8),
    x2: Date.UTC(2014, 11, 9),
    y: 2,
    dataLabels:[{
        format: '54687687',
        crop: true
         }]
}

Пример в jsfiddle: https://jsfiddle.net/levra/kmefL0tr/1/

Answer 1

Это поведение не поддерживается по умолчанию в Highcharts, но в событии afterDrawDataLabels, используя метод css, вы можете установить textOverflow: 'ellipsis' и правильные стили width:

var H = Highcharts;

H.addEvent(H.Series, 'afterDrawDataLabels', function() {
    var movement;

    this.points.forEach(function(p) {
        if (p.shapeArgs.width < p.dataLabels[0].width) {
            movement = (p.dataLabels[0].width - p.shapeArgs.width) / 2;

            p.dataLabels[0].css({
                width: p.shapeArgs.width,
                textOverflow: 'ellipsis'
            });
            p.dataLabels[0].text.attr({
                x: movement
            });
        }
    });
});

Живая демоверсия: https://jsfiddle.net/BlackLabel/h3fwxjb7/

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.SVGElement#css