1

I am not sure what I am missing, but looks like my in-line styling is not recognized by highchart gauge.

The gauge looks extremely big (600X400). it is supposed to be max-width:277 and height:240px with my css.

<libre ng-if="statCtrl.device" title="'Temperature'" sensor="'tc1'" options="statCtrl.device"  connection="statCtrl.device.disconnected" style="min-width: 227px; max-width: 277px; height: 240px;  margin: 5px; padding:0;text-align: center; "></libre>
Mustafa Bereket
  • 129
  • 2
  • 13
  • 1
    What is your JS code? I think it needs to be set there. See this example: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/width/ – Omega May 07 '17 at 22:19
  • 1
    It's probably caused by rendering chart in a hidden div. 600x400 is a default width and height in that case. See [this](http://stackoverflow.com/questions/17206631/why-are-bootstrap-tabs-displaying-tab-pane-divs-with-incorrect-widths-when-using) and [this](http://stackoverflow.com/questions/16436666/highcharts-issue-about-full-chart-width) questions. Probably angular renders first hidden div, then show it. – Paweł Fus May 08 '17 at 08:31
  • Thanks! I guess that was the problem but solved it with @Omega 's solution. – Mustafa Bereket May 08 '17 at 22:03
  • @MustafaBereket great glad you got it sorted. – Omega May 08 '17 at 22:29

0 Answers0