Не показывать метку данных, если недостаточно места

Question

Я пытаюсь создать столбчатую диаграмму с накоплением, используя Highcharts.

Я также хочу отображать метки данных в столбцах, но я хочу отображать только метки, если столбцы достаточно длинные, чтобы их содержать.Если текст длиннее столбца, я хочу скрыть текст

Вот пример диаграммы, которую я пытаюсь построить:

Highcharts.chart('container', {
    chart: {
      type: 'bar'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                formatter: function(){
                    return 'text for value '+this.point.y;
                }
            }
        }
    },

    series: [{
        data: [1,2,3,4,5,6,7,8,9,10,11,12]
    },{
        data: [12,11,10,9,8,7,6,5,4,3,2,1]
    }]
});

А вот ссылка jsfiddle:http://jsfiddle.net/xyszd7p4/

Как скрыть точки данных, если они слишком длинные?В моем примере я хочу скрыть метку данных «текст для значения 1», поскольку она не помещается внутри панели.

Answer 1

В этом ответе показан один из способов скрытия слишком длинных меток: https://stackoverflow.com/a/49750334.. Это не работает напрямую для гистограммы (или для нескольких серий).Но немного его отредактировав, например так:

chart: {
  events: {
    load: function() {
      this.series.forEach(function(series) {
        var points = series.points
        points.forEach(function(point) {
          console.log(point);
          if (point.shapeArgs.height < point.dataLabel.width) { //using shapeArgs.height since this is a bar chart (would be width otherwise)
            point.dataLabel.hide();
          }
        });
      });

    }
  },
  type: 'bar'
},

Вы можете получить то, что вам нужно.

Пример работы JSFiddle: http://jsfiddle.net/ewolden/87c2t4uy/