CODEWITHSUNDEEP
javascriptjqueryhtmlcsshighcharts
patlxix9
patlxix9

Reputation: 39

Highcharts Align HTML Right when Window Resized

I have added custom text to a chart. The chart is fluid and adjusts it's size when the browser window is resized.

Is there any way that I can set the "Monitored Systems" and "Vulnerabilities" sections to be aligned right so that they will resize along with the rest of the chart?

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(); 
})

Upvotes: 1

Views: 86

Answers (1)

morganfree
morganfree

Reputation: 12472

You need to move the html elements chart.events.redraw. You can calculate their new position based on chart.plotLeft and 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
      });
    }
  }
}
},

example: https://jsfiddle.net/cdmv0cys/

Upvotes: 1

Related Questions