Highcharts Выравнивание HTML вправо при изменении окна

Question

Я добавил пользовательский текст в диаграмму. Диаграмма является текучей и регулирует ее размер при изменении размера окна браузера.

Есть ли способ, которым я могу настроить разделы «Контролируемые системы» и «Уязвимости», которые будут выровнены вправо, чтобы они изменили размер вместе с остальной частью графика?

jsFiddle

function(chart) { // on complete 

chart.renderer.html('<div align="center" style="color: #333333; font-size: 36px; font-weight: bold; margin: 0px; padding: 0px;">96</div><div align="center" style="margin: -10px; padding: 0px;">Monitored Systems</div>', 350, 0) 
    .css({ 
     color: '#999999', 
     fontSize: '13px' 

    }) 
    .add(); 



    chart.renderer.html('<div align="center" style="color: #333333; font-size: 36px; font-weight: bold; margin: 0px; padding: 0px;">6</div><div align="center" style="margin: -10px; padding: 0px;"><i class="fa fa-warning" title="Warning"></i> Vulnerabilities</div>', 515, 0) 
    .css({ 
     color: '#999999', 
     fontSize: '13px' 

    }) 
    .add(); 
}) 

Answer 1

Вы должны переместить HTML элементы chart.events.redraw. Вы можете рассчитать их новую позицию на основе chart.plotLeft и chart.plotWidth.

chart: { 
renderTo: 'cont_monitor', 
marginTop: 50, 
backgroundColor: 'transparent', 
events: { 
    redraw: function() { 
    var elements = this.HTMLElements, 
     offsetWidth = 0, 
     i = elements.length; 

    while (--i > -1) { 
     offsetWidth += elements[i].getBBox().width + 75; 
    // offsetWidth += 235; 
     elements[i].attr({ 
     x: this.plotLeft + this.plotWidth - offsetWidth 
     }); 
    } 
    } 
} 
}, 

пример: https://jsfiddle.net/cdmv0cys/