Выравнивание символа легенды бара Highcarts на этикетке

Question

Если я изменяю символ Ширина / Высота на гистограмме, символ «снизу» выравнивается по тексту легенды. Есть ли способ их "выровнять по среднему"?

http://jsfiddle.net/klodoma/h8j0kL1e/

 legend: {
    ...
    symbolHeight: 5,
    symbolWidth: 5,
    symbolRadius: 0,
    ...
  },

Answer 1

Вы можете рассчитать и установить атрибут translateY для символов SVG символа легенды:

    events: {
        load: function() {
            var legendItems = this.legend.allItems,
                textBbox,
                symbolBbox;

            legendItems.forEach(function(item) {
                textBbox = item.legendItem.getBBox();
                symbolBbox = item.legendSymbol.getBBox();

                item.legendSymbol.attr({
                    translateY: symbolBbox.height - textBbox.height / 2
                });
            });
        }
    }

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

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

Answer 2

http://jsfiddle.net/klodoma/p5mdy19u/

Основываясь на ответе @ppotaczek, я выровнял Y так, чтобы он всегда выровнялся по центру, независимо от размера символа.

    events: {
        load: function() {
            var legendItems = this.legend.allItems,
                textBbox,
                symbolBbox;

            legendItems.forEach(function(item) {
                textBbox = item.legendItem.getBBox();
                symbolBbox = item.legendSymbol.getBBox();

                item.legendSymbol.attr({
                    y: textBbox.y + (textBbox.height - symbolBbox.height) / 2
                });
            });
        }
    }

Answer 3

Единственный способ, которым я знаю, - это использовать CSS "это грязно, но работает"

.highcharts-point{
  transform: translate(0, -10px)
}

Fiddle