Issue with highlighting dynamically

Hi I'm trying to update the highlights with a function and it doesn't throw any errors but the highlight doesn't change. There can be any number of segments that need colour between various degrees. If I hardcode 4 or more they work perfectly but creating the array and passing it in inst working.

Here is my code

function colourSector() {

 var strHighlights = [];
 var strColor = 'rgba(54,255,75,1)';
  for (i = 0; i < secStart.length; i++)
  {
    strHighlights.push({from: secStart[i], to: secEnd[i], color: strColor});
  }

  var guage = document.gauges.get("canvas1");
  var hl = [];
  hl.push({highlights: strHighlights});
  guage.update(JSON.stringify(hl));

}